vue学习笔记(1)-组件通信

Vue组件通信及双向数据传递

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_33830216

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ccba9cce51d453ab5096a79

博主整理vue.js知识以加深印象并用于项目动态表单功能。主要介绍组件通信，包括父组件向子组件传值props、子组件向父组件传递$emit()，以及双向数据传递v-model，指出实现双向绑定需同时有props传递和$emit()触发。

vue.js官方教程上讲的也挺清楚的了，自己整理一遍以加深印象，同时也完成自己的项目中需要的动态创建表单提交编辑修改功能。
表单主要是v-model双向绑定实现父组件与子组件的双向数据传递，所以首先说一下组件之间的通信。

组件通信

父组件向子组件传值 props

// 子组件
Vue.component("my-com",{
    template:"<div>{{msg}}===={{info}}</div>",
    props:["msg"],    //必须是字符串形式
    data:function(){ 
        return {
            info:"子组件的信息"
        }
    }
});

// 使用时
<my-com :msg="message"></my-com>  // 必须使用v-bind绑定，不然传递的是字符串

var app=new Vue({
    el:"#app",
    data:{
        message:"父组件的内容"
    }
});
复制代码

子组件向父组件传递$emit()

//逻辑是，给子组件添加事件，子组件事件触发时，往上触发父组件的事件，并且给事件传值，父组件即可获得子组件的值并在事件中处理
Vue.component("my-com",{
    template:'<button type="button" @click="add">点击+1</button>',
    data:function(){
        return {
            count:0
        }
    },
    methods:{
        add(){
            this.count++;
            this.$emit("from-son",this.count);
        }
    }
})

// 使用时
<my-com @from-son="add1"></my-com> // 触发from-son事件，接收到子组件的数据

var app=new Vue({
    el:"#app",
    data:{
        msg:""
    },
    methods:{
        add1(value){
            this.msg=value;
        }
    }
})
复制代码

双向数据传递 v-model

由前面分析可以看出，实现双向绑定的话，就是同时有props传递，又有$emit()触发
首先，<input v-model="text">等价于：

<input v-bind:value="text" v-on:input="text=$event.target.value">
复制代码

因此组件要使用v-model,也需要：

<my-component
    v-bind:value="text"         //父向子传递
    v-on:input="text=$event.target.value"  //子向父传递
><my-component>
复制代码

所以子组件必须满足：

Vue.component("my-component",{
    template:'<div @click="fn"></div>'
    props:['value'],
    methods:{
        fn(event){
            this.$emit("input",event.target.value)
        }
    }
})

复制代码

转载于:https://juejin.im/post/5ccba9cce51d453ab5096a79