vue 父子组件间传值

1.父组件向子组件传值

用props父组件可以向子组件动态传值，

例：

在子组件定义

<div>

     <button>{{text}}</button>

</div>

export default{

      props:{

           text:{type:String,default:''}

      }

}

在父组件中

先导入子组件

import test from 'test'

export default{

     components:{

         test

     }

}

然后在父组件的html中可以直接使用了并传值

  <test text="dfdis"/>

浏览器查看父组件页面会看到一个按钮，提示为dfdis

2.子组件向父组件传值

子向父传值用$emit()

在子组件中：

<div>

    <span>{{text}}</span>

   <button @click="childrenSendFather"></button>

</div>

export default{

    data(){

        return:{

           text:'我是子数据',

       }

    },

  methods:{

      childrenSendFather(){

         <!--   childrenData是在父组件中的一个监听事件  -->

          this.$emit('childrenData',this.text);

      }

   }

}

在父组件中：

先导入子组件

import test from 'test'

export default {

     components:{

          test

      }

}

然后在HTML页面中：

<test @childrenData="getChildrenData"></test>

在js中添加方法：

import test from 'test'

export default {

     components:{

          test

      }，

     methods:{

         getChildrenData(data){// data 是监听到的子组件的值

               let childrenValue = data;

              console.log(childrenValue);

        }

     }

}

这是在浏览器控制台查看会输出：我是子数据

3.vue中自定义组件之间的多层嵌套

    比如定义了两个组件  test1 ，test2 ，但是在父组件中我不是单个使用，而是嵌套使用

例如： 

<test1>

     <test2></test2>

</test1>

    这样的情况就必须使用vue提供的插槽slot

在test1组件中加入<slot></slot>标签，表示