vue2 子传父，父传子,v-model双向绑定

最新推荐文章于 2024-07-25 09:35:22 发布

程序猿_“大神”

最新推荐文章于 2024-07-25 09:35:22 发布

阅读量1.5k

点赞数

分类专栏： vue常用代码文章标签： vue.js

本文链接：https://blog.csdn.net/dyx001007/article/details/123632715

版权

本文详细介绍了Vue2中如何实现父组件向子组件传递数据，子组件向父组件发送事件更新数据，以及利用v-model进行双向数据绑定的实践方法。通过示例代码展示了具体的实现步骤和使用场景。

摘要由CSDN通过智能技术生成

父传子

在components里面创建子组件aaaChild.vue

//子组件
<aaa-child :list="list" @add="add"></aaa-child>



data() {
   return {
     list:[
       {
         name:'小明',
         age:18
       },
       {
         name:'小红',
         age:16
       }
     ]
   }
 }

子传父

父

//设置自定义事件
<dyx-child @add="add"></dyx-child>

//val是子组件传过来的值
 methods: {
   add(val){
     console.log(val);
   }
 },

子

//随便设置一个事件
<button @click="add">点击</button>


//用this.$emit()向父组件传值  第一个是绑定父组件的自定义事件  第二个是传递的值
 methods: {
   add(){
     this.$emit('add','12312312' )
   }
 }