父子组件之间传递数据的方法

一.属性

组件是Vue.js开发中的基本单元，组件之间不可避免的需要传递数据

从父组件向子组件传递数据是最主要的方式，可通过组件的props(属性)和slot(插槽)来实现

vue.js还允许使用更明确的方式定义属性，即通过一个对象而不是一个数组来定义一个组件的各种属性。

使用props选项来定义:

1.使用字符串数组来声明

export default {

        props:['name','age']

    }

   2.使用对象的方式来声明

 export default {

        props:{

            key:value,

            (key是prop的名称，值是该prop预期类型的构造函数)

            name:Sting,

            age:Number.

        }

    }

[props单向数据流]

概念:父组件的数据改变了会自动流动到自组件，但是子不允许修改由props流过来的数据

        所谓的单向数据流不允许子修改，是不允许改栈，但是可以改堆。

例如:父传了数组给子，在子里面可以通过调用push，pop，shift，unshift，splice等等方法来改           堆。 而且改完后父也会跟着改，因为他们指向的是同一个堆。但是在这里不允许改props上的         栈上的数据，父可以改，而且改完后能流入到子。

二.插槽

插槽的作用：向组件传递另一个组件的开闭标记之间的内容

slot-具名插槽

1.什么叫具名插槽？  

      就是有名字的插槽

2.为什么要用具名插槽？  

      因为一个组件里可能有多个地方都不想写死，那就使用具名插槽

命名语法：

<slot name = '名字'>默认值</slot>

使用语法：(依赖template包裹,并且使用v-slot指定插槽的名字)

     <template v-slot:插槽名>

            要传递的内容

     </template>

简写语法：(把v-slot变成#)

      <template #插槽名>

            要传递的内容

      </template>

三.从子组件向父组件传递数据

在Vue.js中，如果子组件需要向父组件传递数据，就需要使用事件机制来实现。父组件之间的数据流总结起来就是：“从上向下通过属性传递数据，从上向下通过事件传递数据”。档子组件向父组件传递数据时，需要通过$emit()方法向父组件暴露一个事件，然后父组件在处理这个事件的方法中获取子组件传来的数据。

【$emit】

    子组件如何给父组件传递数据?

    利用发通知的形式来间接传数据。

    发通知的语法:this.$emit('自定义的事件名'数据)

    父里要订阅这个通知(相当于监听这个事件)

    <子组件 @自定义的事件名="函数">

    当子的$emit执行时，就会自动调用父里绑定的函数，函数的参数就是子传递过来的数据。

例如:

    子组件的代码

<button aclick="$emit('sb' "hello’)">点击后,要给父传递数据</button>

    解释:当子组件里面点了这个按钮，就会触发一个叫sb的事件，那个父组件如果监听了sb就会调用。

    父里的代码

<子组件 @sb="函数"/>

    当sb事件通知时，就会调用上面的函数，函数的参数就是永不过时。