Vue中父组件向子组件传值

父组件：

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

子组件：

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-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>