Vue中父组件向子组件传值

时间:2020-05-28
本文章向大家介绍Vue中父组件向子组件传值,主要包括Vue中父组件向子组件传值使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

父组件:

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

原文地址:https://www.cnblogs.com/hahahakc/p/12982475.html