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

本文详细介绍了Vue.js中父组件向子组件传递数据的方法，包括使用props选项进行单向数据流的实现，以及子组件如何通过自定义事件向父组件发送数据。同时，还解释了v-model指令在双向数据绑定中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

父传子
- 在子组件使用 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事件。