Vue组件之间的传值

一、子组件获取父组件的值、标签

子组件：HeadTop

<!--定义项目的公共头部
  props:组件之间传递的是数据
  slot：组件之间传递的是标签
-->
<template>

  <header class="header">
    <!--
      1. 插槽是父组件与子组件的通讯方式，子组件中的slot可以显示父组件传递给子组件的内容
      2. 父组件通过指定slot的name属性可以指定插入到哪个插槽里面！
       -->
    <slot name="left"></slot>

    <span class="header_title">
      <span class="header_title_text ellipsis">{{title}}</span>
    </span>

    <slot name="right"></slot>

  </header>

</template>

<script>

export default {

  //子组件接收父组件传递过来的数据
  props: {
    title: String
  }
}

</script>

<style lang="stylus" rel="stylesheet/stylus">
  样式部分省略了，主要是看父向子传值
</style>

 父组件：

  
<template>
<!-- :title="msg" 属性绑定的方式向子组件传值
     注意：msg是在vue对象data里面定义的
-->
<HeaderTop :title="msg">
      <!--  要使用slot="left"指定插入哪个插槽，这里面的left是和组件slot的name属性值一致的！ -->
      <router-link class="header_search" slot="left" to="/search"></router-link>
    </HeaderTop>
</template>

【提示】 我们可以看到父向子传值用的是props，传标签用的是slot

 

二、子组件调用父组件的方法

父组件

子组件：

【注意】this.$emit('func')实现子组件调用父组件的show方法

 

三、父组件调用子组件的属性、方法

子组件模板任意，父组件在引用子模板时，添加ref属性，如下：

父组件的methods：

this.$refs.mylogin 这样的方式父组件获取子组件的引用

this.$refs.mylogin.方法名   父组件调用子组件的方法

this.$refs.mylogin.属性  父组件调用子组件的属性