1.父組件通過props屬性給子組件通信

//父組件 <template> <child :show="is_showshare" :age="age"></child> </<template> <script> import child from '@/components/child'export default{data(){return{is_showshare:false,age:10} },components:{child} } </script>//子組件 //方法一 <template><div v-show="show">分享</div> </<template> <script>export default{props:['show']}</script> //方法二<template><div v-show="show">分享</div></<template> <script>export default{props: {// 檢測類型show: [Boolean,Number],// 檢測類型 + 其他驗證age: {type: Number,default: 0,//設置默認值required: true,//必填validator: function (value) {//自定義驗證函數return value >= 0}} }

props 可以是數組或對象，用于接收來自父組件的數據。props 可以是簡單的數組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義校驗和設置默認值。

2.子組件觸發父組件
父組件自定義一個事件hideshare，子組件通過this.$emit()來觸發綁定的事件hideshare,然后父組件監聽hideshare，一旦hideshare被觸發便會觸發父組件的parenthide方法。

//父組件 <template> <child :show="is_showshare" :age="age" @hideshare="parenthide"></child> </<template> <script>export default{data(){return{is_showshare:false,age:10}},methods:{parenthide:function(v){console.log('hideshare',v);//'hideshare' falsethis.is_showshare=false;}} } </script>//子組件 <template><div v-show="show">分享<p @click="hide">隱藏分享</p></div> </<template> <script>export default{props:['show'],methods:{hide:function () {this.$emit('hideshare',false)}} }</script>

3.兄弟組件通信
借助于一個公共的Vue的實例對象，不同的組件可以通過該對象完成事件的綁定和觸發

index.vue里有2個兄弟組件，c1.vue,c2.vue,點擊c2組件里邊添加點擊事件，在c2組件里打印出點擊的是哪個dom元素

<template> <div><c1></c1><c2></c2></div> </template> <script>import showv from '@/components/show.vue'import clickv from '@/components/click.vue' export default {name: "index",components:{showv,clickv} } </script>

1.新建一個公共的Vue的實例對象

com.js

import Vue from 'vue' export default new Vue();

2.c1.vue里觸發事件

<template> <div @click="doclick($event)">click</div> </template> <script>import com from '@/components/com.js'export default{name: "",data(){},methods: {doclick(event){com.$emit('gettarget',event)}}} </script>

3.c2.vue事件綁定

<template><div> show</div> </template> <script> import com from '@/components/com.js'export default{name: "",created(){com.$on('gettarget',target=>{console.log('兄弟組件通信成功',target);})}} </script>

總結

以上是生活随笔為你收集整理的关于vue2.0组件通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。