##組件通信：
子組件獲取父組件的數(shù)據(jù)父組件獲取子組件的數(shù)據(jù)平行組件之間的通信vue2.0中用子組件修改父組件數(shù)據(jù)報(bào)錯(cuò)問(wèn)題一定需要通過(guò)子組件修改父組件
子組件獲取父組件的數(shù)據(jù)
通過(guò)子組件中的屬性props，以與父組件數(shù)據(jù)的綁定。（注意：1.0版本允許子組件修改父組件的數(shù)據(jù)，使用sync進(jìn)行同步。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: "父組件數(shù)據(jù)1",msg2: "父組件數(shù)據(jù)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>
父組件獲取子組件的數(shù)據(jù)
利用子組件的事件調(diào)用$emit(事件名，數(shù)據(jù)參數(shù))進(jìn)行事件監(jiān)聽，并傳遞參數(shù)給父組件。
<!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: "子組件數(shù)據(jù)",}},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>
平行組件之間的通信
通過(guò)定義事件調(diào)度器，用emit()傳遞，用emit()傳遞，用emit()傳遞，用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() {// 事件調(diào)度器var Event = new Vue();Vue.component('First', {template: `<div>First說(shuō)：<input @keyup="onChange" v-model="fir"></div>`,data() {return {fir: '',}},methods: {onChange() {Event.$emit('sec_said', this.fir);}}})Vue.component('Second', {template: `<div>Second重復(fù)First說(shuō)的話：{{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中用子組件修改父組件數(shù)據(jù)報(bào)錯(cuò)問(wèn)題
可以利用mounted()進(jìn)行中轉(zhuǎn)，變?yōu)閱渭兊膶?duì)子組件進(jìn)行修改，這樣可以不產(chǎn)生錯(cuò)誤信息，但是并不能將更改同步到父組件身上
<!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'],// 通過(guò)mounted進(jìn)行中轉(zhuǎn)，變?yōu)閷?duì)子集元素的操作mounted() {this.b = this.msg;},methods: {change() {this.b = '被更改了';}}})new Vue ({el: '#box',data: {a: "父組件數(shù)據(jù)",},})}</script>
</head>
<body><div id="box" v-cloak>父級(jí)： -> {{a}}<child :msg="a"></child></div>
</body>
</html>
一定需要通過(guò)子組件修改父組件
那么可以采用下面的方法，將數(shù)據(jù)封裝成一個(gè)對(duì)象傳遞給子組件，由于js對(duì)象之間是引用的關(guān)系，所以改變引用必然改變數(shù)據(jù)。
<!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: "父組件數(shù)據(jù)",}},})}</script>
</head>
<body><div id="box" v-cloak>父級(jí)： -> {{giveData.a}}<child :msg="giveData"></child></div>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的Vue入门 ---- 组件通信的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
