1.props单向传递

2.子组件绑定自定义事件

3.子组件绑定自定义事件并传递数据

4.补充

本文主要介绍Vue.js中子组件如何操纵父组件的数据，前面的文章介绍了父组件可以通过props向子组件传递自身的数据，那么子组件怎么操纵父组件中的数据、怎么向父组件传递数据呢？下面进行具体介绍。

1.props单向传递

子组件通过props属性接受父组件的数据，这一过程是单向的。除一些引用数据类型外，当改变接受值时，父组件的相应值并不发生变化。

以下实例中，当点击按钮后，m变为200，但父组件中的msg未变

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="app"><test :m="msg"></test></div><script src="./vue.min.js"></script><script>Vue.component('test', {props: ['m'],data: function() {return;},template: `<div><div v-text="m"></div><button @click="m=200">点击</button></div>`})let vm = new Vue({el: '#app',data: {msg: 100}})</script>
</body></html>

2.子组件绑定自定义事件

（1）于子组件的模板元素中绑定自定义事件，语法格式为：

@普通事件名（如click）="$emit(自定义事件名)"

（2）在子组件使用时绑定自定义事件，例如下面实例中的

@pushfruit=' 操作...'

由此便可实现子组件对父组件数据的操纵

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><menu-item :mlist="list" @pushfruit='list.push("lemon")'></menu-item></div><script src="./vue.min.js "></script><script>// （mlist.push("lemon")）直接在子组件中操作，父组件中的数据会改变（前提是数组、对象等引用数据类型），但不建议这样做，因为props是单向数据流。// 建议方法：为子组件绑定自定义事件，在父组件中通过绑定该事件操作父组件的数据Vue.component('menu-item', {props: ['mlist'],data: function() {return {};},template: `<div><ul><li v-for="item in mlist" v-text="item"></li></ul><div><button @click='$emit("pushfruit")'>点击添加lemon</button></div></div>`});let vu = new Vue({el: '#app',data: {list: ['apple ', 'pear ', 'watermelon '],fruitsItem: ' '}});</script>
</body></html>

3.子组件绑定自定义事件并传递数据

在上面实例中的$emit函数中，添加的第二个参数即是子组件传递给父组件的数据。下面实例通过子组件向父组件传递指定值改变字体的大小

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div :style="{fontSize:fSize+'px'}">病勉然，珍种自舟病仍事。</div><son @enlarge="addF($event)"></son></div><script src="./vue.min.js"></script><script>Vue.component('son', {data: function() {return {}},template: `<button @click='$emit("enlarge",20)'>点击</button>`})let vu = new Vue({el: '#app',data: {fSize: 20},methods: {addF(n) {this.fSize += n}}})</script>
</body></html>

4.补充

自定义事件的另一种写法：

首先，子组件中的写法不变，绑定基本事件，通过方法的调用声明自定义事件。其次，在父组件使用子组件的步骤（下例中child-a是子组件）：

 <child-a ref="get1"></child-a>

通过生命周期函数进行绑定：

mounted(){this.$refs.get1.$on('getInfo1',this.getInfo1)}

getInfo1为methods中的方法.

当然，也可直接省去自定义事件的步骤，直接利用native修饰符为组件绑定原生事件，应具体情形而定。

Vue.js之子组件操纵父组件的数据相关推荐

（25）Vue.js组件通信—父组件向子组件传值
一.Vue.js组件通信介绍子组件如何获取父组件中的数据?父组件如何得知子组件的数据变更?如果是更加复杂的组件关系呢?在组件间传递数据的操作,称为组件通信. 二.Vue.js组件通信内容 • 父组件 ...
vue.js组件之j间的通讯一子组件接受父祖件数据
Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...
Vue.js 父组件向子组件传值和子组件向父组件传值
父组件向子组件传值组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script>// 创建 Vue 实例,得到 ViewModelvar vm = new ...
Vue.js子组件向父组件通信
一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的 ...
vue子组件获取父组件数据_在vue.js中父组件是如何向子组件传递数据的？
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法...
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法"问题疑问,本网通过在网上对" (v ...
41. Vue组件传值-父组件向子组件传值
前言前面写了组件的创建.切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用.这里存在一个问题,就是父组件的数据如何传递到子组件中. 这是一个很常见的情况,如果是jQuery那么都是直接 ...
vue 组件间的通信，子组件向父组件传值的方式总结
写vue,如果页面涉及到多个组件,就会涉及组件之间的通信,可能是父子组件间的通信,也可以是同级组件间的通信,那么,vue里面的组件如何通信.一般来说在vue的数据传递是在父组件传子组件通过属性来传,子 ...
5.VUE简单的组件间传值【父组件向子组件传值；子组件向父组件传值】
父组件向子组件传值父组件使用子组件时通过v-bind:变量的形式将对应的值传给todo-item子组件子组件通过props接收从父组件传来的content参数子组件向父组件传值数据在父组件中 ...

Vue.js之子组件操纵父组件的数据

1.props单向传递

2.子组件绑定自定义事件

3.子组件绑定自定义事件并传递数据

4.补充

Vue.js之子组件操纵父组件的数据相关推荐

最新文章

热门文章