Vue入门 ---- 组件通信

##组件通信：

子组件获取父组件的数据
父组件获取子组件的数据
平行组件之间的通信
vue2.0中用子组件修改父组件数据报错问题
一定需要通过子组件修改父组件

子组件获取父组件的数据
通过子组件中的属性props，以与父组件数据的绑定。（注意：1.0版本允许子组件修改父组件的数据，使用sync进行同步。2.0不再支持）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib\vue.js"></script><style>[v-cloak] {display: none;}</style><script>window.onload = function() {Vue.component('parent', {template: `<div><h1>父组件-->{{msg1}}, {{msg2}}</h1><child :m1="msg1" :m2="msg2"></child></div>`,data() {return {msg1: "父组件数据1",msg2: "父组件数据2",}}})Vue.component('child', {template: `<h2>子组件-->{{m1}}, {{m2}}</h2>`,props: ['m1', 'm2'],})new Vue ({el: '#box',data: {},})}</script>
</head>
<body><div id="box" v-cloak><parent></parent></div>
</body>
</html>

父组件获取子组件的数据
利用子组件的事件调用$emit(事件名，数据参数)进行事件监听，并传递参数给父组件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib\vue.js"></script><style>[v-cloak] {display: none;}</style><script>window.onload = function() {Vue.component('parent', {template: `<div><h1>父组件-->{{msgc}}</h1><child @m3="get"></child></div>`,data() {return {msgc: ""}},methods: {get(msg) {this.msgc = msg;}},}),Vue.component('child', {template:`<div><h2>子组件-->{{msg3}}</h2><input type="button" name="" id="" value="按钮" @click="send"></div>`,data() {return {msg3: "子组件数据",}},methods: {send() {this.$emit('m3', this.msg3);}}})new Vue ({el: '#box',data: {},})}</script>
</head>
<body><div id="box" v-cloak><parent></parent></div>
</body>
</html>

平行组件之间的通信
通过定义事件调度器，用 $e m i t () 传递，用$ on()接收

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib\vue.js"></script><style>[v-cloak] {display: none;}</style><script>window.onload = function() {// 事件调度器var Event = new Vue();Vue.component('First', {template: `<div>First说：<input @keyup="onChange" v-model="fir"></div>`,data() {return {fir: '',}},methods: {onChange() {Event.$emit('sec_said', this.fir);}}})Vue.component('Second', {template: `<div>Second重复First说的话：{{sec}}</div>`,data() {return {sec: '',}},mounted() {// 用变量存下this的指向var me = this;Event.$on('sec_said', function(data) {me.sec = data})}})new Vue ({el: '#box',data: {},})}</script>
</head>
<body><div id="box" v-cloak><First></First><second></second></div>
</body>
</html>

vue2.0中用子组件修改父组件数据报错问题
可以利用mounted()进行中转，变为单纯的对子组件进行修改，这样可以不产生错误信息，但是并不能将更改同步到父组件身上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib\vue.js"></script><style>[v-cloak] {display: none;}</style><script>window.onload = function() {Vue.component('child', {template: `<div><h3>子组件</h3><input type="button" name="" id="" value="按钮" @click="change()"><strong>{{b}}</strong></div>`,data() {return {b: '',}},props:['msg'],// 通过mounted进行中转，变为对子集元素的操作mounted() {this.b = this.msg;},methods: {change() {this.b = '被更改了';}}})new Vue ({el: '#box',data: {a: "父组件数据",},})}</script>
</head>
<body><div id="box" v-cloak>父级： -> {{a}}<child :msg="a"></child></div>
</body>
</html>

一定需要通过子组件修改父组件
那么可以采用下面的方法，将数据封装成一个对象传递给子组件，由于js对象之间是引用的关系，所以改变引用必然改变数据。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib\vue.js"></script><style>[v-cloak] {display: none;}</style><script>window.onload = function() {Vue.component('child', {template: `<div><h3>子组件</h3><input type="button" name="" id="" value="按钮" @click="change()"><strong>{{msg.a}}</strong></div>`,props:['msg'],mounted() {this.b = this.msg;},methods: {change() {this.msg.a = '被更改了';}}})new Vue ({el: '#box',data: {giveData: {a: "父组件数据",}},})}</script>
</head>
<body><div id="box" v-cloak>父级： -> {{giveData.a}}<child :msg="giveData"></child></div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/569620.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！