标签：向子 Vue headTitle 登录 mapState mapActions props 组件

父组件：

1 <head-top goBack="true" :headTitle="loginWay ? '登录' : '密码登录'">
2       <template v-slot:changeLogin>
3         <div class="change_login" @click="changeLoginWay">{{ loginWay ? '密码登录' : '短信登录' }}</div>
4       </template>
5     </head-top>

View Code

子组件：

1、先接受父组件传递过来的值，使用props

<template>
  <header id="head_top">
    <slot name="logo"></slot>
    <slot name="search"></slot>
    <section class="head_goback" v-if="goBack" @click="$router.go(-1)">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:2" />
      </svg>
    </section>
    <router-link :to="userInfo ? '/profile' : '/login'" v-if="signinUp" class="head_login">
      <svg class="user_avatar" v-if="userInfo">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user" />
      </svg>
      <span class="login_span" v-else>登录|注册</span>
    </router-link>
    <section class="title_head ellipsis" v-if="headTitle">
      <span class="title_text">{{ headTitle }}</span>
    </section>
    <slot name="edit"></slot>
    <slot name="msite-title"></slot>
    <slot name="changecity"></slot>
    <slot name="changeLogin"></slot>
  </header>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  props: ['signinUp', 'headTitle', 'goBack'],
  name: 'Head',
  mounted() {
    this.getUserInfo()
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapActions(['getUserInfo'])
  }
}
</script>

View Code

 

 

标签：向子,Vue,headTitle,登录,mapState,mapActions,props,组件
来源： https://www.cnblogs.com/hahahakc/p/12982475.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。