vue入门学习篇——父子组件通信

Vue父子组件之间通信的原理

　　父组件：props down —— 父组件通过props向下传递数据给子组件

　　子组件：events up —— 子组件通过事件events向上传递数据给父组件

下面我们来看一下具体的实现效果：

父组件 ==》子组件

1、首先在父组件上通过v-bind设置属性传值例如key、item、index

<div id="root"><input v-model="inputValue" /><button @click="butClick">submit</button><ul>　　　　　//在父组件定义属性传值<list-item v-for="(item,index) of list":key="index":item="item":index="index"@delete="liDelete"//父组件自定义事件delect></list-item></ul>
</div>

2、然后子组件通过props接收属性，属性值可以在子组件中任意使用

//这里定义一个全局组件，就不单独写一个.vue文件了Vue.component('list-item',{　　 //子组件通过props接收props:['item','index'],template:'<li>{{item}} <button @click="liClick">删除</button></li>',methods:{liClick:function(){this.$emit('delete',this.index)//子组件通过$emit触发delete事件，把当前的index传给父组件}}
})

子组件 ==》父组件

1、父组件自定义一个事件方法，即delete

2、子组件通过$emit触发delete事件，把当前的index传给父组件

new Vue({//绑定元素el:'#root',//数据
    data:{inputValue:'',list:[]},methods:{butClick:function(){if(this.inputValue !==''){this.list.push(this.inputValue)}this.inputValue = '';},liDelete:function(index){this.list.splice(index,1)}}
})

实现效果：

转载于:https://www.cnblogs.com/hess/p/10877185.html

vue入门学习篇——父子组件通信相关推荐

Vue（一）父子组件通信
Vue 父子组件通信的三种方案解决方法使用props进行通信使用事件分发机制(EventBus) $parent 属性 vuex方式 (后续补充) 结构图一. props p r o p s ...
四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
Vue 学习06——Vue父子组件通信、非父子组件通信1
目录㋀㋊ ✎ 父子组件间通信(Communication) ◆ 组件间通信父组件向子组件传递数据 ➬ ① 前言 ② demo ➬ 还有一种形式叫做插槽 ◆ 子组件向父组件传递数据 ① 前言 ② ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
文章目录一.案例概述二.代码准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.复习父子组件通信 1.1.父传子(自定义属性) 1.2.子传父(自定义事件) 2.动态组件 2.1.实现 ...
Vue.js-Day03-PM【组件通信（安装Vetur插件、父子组件通信、子父组件通信）、项目发送与启动（项目发给别人、启动别人的项目）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 6.组件通信安装 Vetur 插件 6.1.父子组件通信子定义props 父组件模板图解 6.2.子父组 ...
vue组件通信之父子组件通信
准备工作: 首先,新建一个项目,如果这里有不会的同学,可以参考我转载过的文章 http://www.cnblogs.com/Sky-Ice/p/8875958.html vue 脚手架安装及新建项目 ...

vue入门学习篇——父子组件通信

vue入门学习篇——父子组件通信相关推荐

最新文章

热门文章