频道组件封装-准备知识-父子传值——父向子传值：在子组件使用 props 选项接收父组件的数据 & 子向父传值：子组件可以使用 $emit 触发父组件的自定义事件

频道组件封装-准备知识-父子间传值

• 父传子
  • 在子组件使用 props 选项接收父组件的数据。

<!-- 父组件 -->
<template>
	<div><com-child :value="父组件数据"></com-child></div>
</template>

<!-- 子组件 -->
<template> 
    <div>
    	{{value}}
    </div>
</template>
<script>
    export default {
        // 父传子数据特点  只读
        props:['value']
    }
</script>

• 子传父
  • 首先：在父组件，使用子组件的位置，给子组件绑定一个自定义事件
  • 然后：在子组件，触发这个事件，触发同时给这个事件绑定的函数传参
  • 最后：事件绑定的函数在父组件，接收到传参后意味得到了子组件的数据

<!-- 父组件 -->
<template>
	<div><com-child @input="fn">{{parentMsg}}</com-child></div>
</template>

<!-- 子组件 -->
<template> 
    <div>
        <button @click="submit()"></button>
    </div>
</template>
<script>
    export default {
        methods:{
            submit () {
                this.$emit('input','子组件数据')
            }    
        }
    }
</script>

// 父组件代码
 methods:{
     fn (data) {
         // 获取子组件提交的数据  data
         // 怎么使用data和你的业务有关系
          this.parentMsg = data
     }    
 }

• v-model语法糖（简写了一些复杂代码）
  • 双向数据绑定指令，实现：赋值，修改值。
  • 假设数据：data(){return{msg:‘hi vue’}}
  • 赋值： <input :value="msg" />
  • 改值： <input @input="msg=当前表单元素的值" >
  • v-model的本质：绑定的value属性和绑定了一个input事件。