子、父组件的数据传递(理解篇)

组件之间是需要通信的，可以理解为子组件是一个空壳，而调用子组件的父组件赋予了它灵魂。

业务逻辑举栗：

使用select 组件 父组件需要往子组件传入数据表示使用哪些select 数据.如{"text":"重庆","v":"cq"} --父传子

当选择重庆后子组件需要返回给父组件一个value-->cq --子传父

 

//父传子理解：父组件使用v-bind 动态绑定事件并传入参数，子组件使用props 获取参数并使用
实现如下：
父传子：props 这个属性进行传递 ：可数组，可对象。
数组：props:['某参数'] 
对象：可规定类型 {'myval':number }  如{'myval':[number,String]}


/*子传父理解：子组件绑定事件并注册一个自定义指令并传入参数，然后在父组件调用的子组件中
使用注册的自定义指令，再触发方法获取回传的参数。*/
实现如下：
第一步：this.$emit('child-to-far',"hello"); 注册自定义事件并传入参数
第二步：<my-child v-on:child-to-far="getSomeThing"></my-child>  引入组件在父组件调用自定义的指令
第三步：在父组件的 methods 中 增加getSomeThing (msg){ console.log(msg)}

另一种父传子的方式：
业务举例：子组件是一个dialog 而父组件需要往dialog 里传入一些html 代码是子组件在不同的地方显示的dialog 呈现不同。
如果父组件需要往子组件内传入模板（html）而非数据.可以使用
<p solt="header"></p>   -----父组件代码
<solt name="header"></sole>  ---子组件代码。
以上两段代码表示  父组件定义solt属性为header  子组件使用solt 标签属性name的值 与父组件solt 的值对应 
这样可以知道父组件想写入子组件的什么位置

动态组件 :is 

业务场景：当父组件中可能使用子组件A也可能使用子组件B，两者相互切换的时候就可以用。

使用理解：使用 :is绑定一个参数，然后将参数赋予组件名称，然后在方法中改变该参数为另一个组件

实现：  模板里定义 <p :is="curr"></p> 然后在data 中去定义这个  curr='comA' 然后方法中去改变该curr   

 

props 从父组件传入的数据是单向数据流 在子组件内的改变是不会对父组件进行作用的。//2018-04-22 mack 后面理解

 如果需要修改参考下面的链接

https://cn.vuejs.org/v2/guide/components.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81