Vue父子组件互相通信实例

组件实例之间的作用域是独立的，意味了不应该在子组件的模板内直接引用父组件的数据，但是父子组件之间需要通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。

prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项声明 “prop”：

Vue.component('child', {// 声明 propsprops: ['message'],// 就像 data 一样，prop 可以用在模板内// 同样也可以在 vm 实例中像 “this.message” 这样使用template: '<span>{{ message }}</span>'})

一个实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多层组件通信</title>
</head>
<body><div id="app"><my-parent :imgtitle='title' :imgsrc='img'></my-parent></div><template id="my_img"><img :src="imgsrc" width="200"></template><template id="my_title"><h2>{{title}}</h2></template><template id="my_parent"><div><child1 :imgsrc="imgsrc"></child1><child2 :title="imgtitle"></child2></div></template><script src="js/vue.min.js"></script><script>//1.子组件的实例let Child1 = Vue.extend({template:'#my_img',props:['imgsrc']});let Child2 = Vue.extend({template:'#my_title',props:['title']});//注册父组件Vue.component('my-parent',{props:['imgtitle','imgsrc'],components:{'child1':Child1,'child2':Child2},template:'#my_parent'});new Vue({el:'#app',data:{title:'我很帅',img:'img/01.jpg'}});</script>
</body>
</html>

可以看到数据从父组件通过props传递给子组件，但是注意通过这种方法prop默认是单向绑定，当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态。

然后就是子组件传递数据给父组件，通过自定义事件。

每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

一个实例，一旦子组件的total()事件发生，通过emit触发父组件的方法。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue的自定义事件</title>
</head>
<body>
<div id="app"><my-btn @total="allcounter()"></my-btn><my-btn @total="allcounter()"></my-btn><my-btn @total="allcounter()"></my-btn><my-btn @total="allcounter()"></my-btn><my-btn @total="allcounter()"></my-btn><my-btn @total="allcounter()"></my-btn><p>所有按钮一共点击了{{totalCounter}}次</p>
</div><template id='my_btn'><button @click="total()">点击了{{counter}}次</button>
</template><script src="js/vue.min.js"></script>
<script>Vue.component('my-btn',{template:'#my_btn',data(){return{counter:0}},methods:{total(){this.counter += 1;//子组件通知外界，我调用了这个方法this.$emit('total');}}});new Vue({el: '#app',data: {totalCounter:0},methods:{allcounter(){this.totalCounter += 1;}}});
</script>
</body>
</html>

运行结果就是子组件之间的点击互不影响，父组件总点击数增加。

Vue父子组件互相通信实例相关推荐

【Vue父子组件间通信】
Vue父子组件间通信父子组件通信父传子 (props) 子传父 (自定义事件) 完整代码效果父子组件通信父传子 (props) (1)在父组件中使用子组件时,给子组件一个自定义属性,这个属性 ...
vue 父子组件间通信
前言在vue项目中,封装组件,涉及到父子组件的传值,本文主要讲解父子组件之间传值的方法. 一.props / $emit 适用于父子组件通信,单向数据流,这种方法是 vue 组件的基础. 二.ref ...
Vue父子组件间通信
组件是vue.js最强大的功能之一,但组件之间的作用域是相互独立的,这就意味着不同组件之间的数据是无法相互引用的.为实现组件之间的通信,vue为我们提供了三种方式:prop.ref.emit. 首先创 ...
vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
vue3语法糖父子组件的通信
vue父子组件的通信父组件想调用子组件的方法通过ref属性获取子组件实例,然后子组件将方法暴露出去,父组件就可以调用子组件的方法例如父组件点击编辑按钮,弹出添加对话框子组件,要调用对话框子组件 ...
Vue 父子组件间的通信
前言在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法父组件传值给子组件,这 ...
Vue 学习06——Vue父子组件通信、非父子组件通信1
目录㋀㋊ ✎ 父子组件间通信(Communication) ◆ 组件间通信父组件向子组件传递数据 ➬ ① 前言 ② demo ➬ 还有一种形式叫做插槽 ◆ 子组件向父组件传递数据 ① 前言 ② ...
vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
Vue父子组件通信和插槽
Vue父子组件通信父子组件通信和双向绑定 -如果使用v-model进行双向绑定时,当绑定在组件的props中的数据时,虽然可以完成双向绑定,但会出现警告:因此我们在进行组件双向绑定时,不能直接绑定给 ...

Vue父子组件互相通信实例

Vue父子组件互相通信实例相关推荐

最新文章

热门文章