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

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-componentv-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

vue学习笔记(1)-组件通信相关推荐

Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
Vue学习笔记02 = 组件化
目录一.组件化基本概念什么是组件化?组件化有什么作用? 人面对复杂问题的处理方式: 组件化也是类似的思想: Vue组件化思想: 组件化思想的应用: 二.组件的基本使用: 2.1.创建组件的构造器. ...
【Vue】Vue学习笔记——UI组件库和常用插件
文章目录 6. UI组件库和常用插件 6.1 Element-ui 6.2 Vue-router 6.2.1 基本用法 6.2.2 跳转 6.2.3 路由嵌套 6.2.4 路由参数传递 6.3 Axi ...
Vue学习笔记(八) 组件进阶
1.插槽 (1)插槽内容像 HTML 元素一样,我们常常需要给组件传递内容比如在下面的例子中,我们给自定义组件 prompt-info 传入出错啦的文本 <!DOCTYPE html&g ...
Vue学习笔记_组件化
文章目录
Vue学习笔记（二）组件化和模块化
Vue学习笔记(二)组件化和模块化前言组件化什么是组件化 1.基础使用 2.全局组件和局部组件 3.语法糖和模板抽离 4.组件的data为什么是函数 5.父子组件 5.1 父子组件 5.2 父子 ...
Vue学习（动态组件、组件路由缓存keepalive）-学习笔记
文章目录 Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件组件路由缓存keepalive Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件 < ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...