組件通信

vue本身的組件通信

• 父==>子：父組件向子組件傳參或者調用子組件的方法
• 子==>父：子組件向父組件傳參或者調用父組件的方法
• 兄弟之間：兄弟組件之間傳參或者調用方法

父子通信

• 傳參 - props

思路：定義子組件的屬性（自定義），父組件賦值給子組件

• 調用方法（1） - $refs

思路：定義子組件的屬性-ref="a",父組件通過：this.$refs.a.子組件方法();

• 調用方法（2） - children

思路：父組件通過：this.$children[0].子組件方法();

子父通信

• 調用方法（1） - $parent.$emit("父組件自定義事件");

思路：父組件在組件的生命周期（mounted）用$on定義事件，子組件用this.$parent.$emit("父組件自定義事件");

• 調用方法（2） - $emit("父組件自定義事件");

思路：父組件在調用子組件時用v-on把事件傳給子組件，子組件用this.$emit("父組件自定義事件")調用父組件傳過來的事件 <div id="app"><h1>父組件-{{this.text}}</h1><!-- 子組件 --><child v-on:parentEvent="changeText()"></child> </div> <script type="text/javascript">var vm = new Vue({el:"#app",data:{text:''},methods:{changeText(_text){this.text = _text;}},components:{'child':{template:'<p><label>子組件</label><input type="text" v-on:input="change" /></p>',methods:{change(event){this.$emit('parentEvent',event.target.value);}}}}}); </script>

• 調用方法（3） - parent

思路：父組件在調用子組件時用v-on把事件傳給子組件，子組件用this.$parent.父組件事件 <div id="app"><h1>父組件-{{this.text}}</h1><child></child> </div> <script type="text/javascript">var vm = new Vue({el:"#app",data:{text:''},methods:{changeText(_text){this.text = _text;}},components:{'child':{template:'<p><label>子組件</label><input type="text" v-on:input="change" /></p>',methods:{change(event){this.$parent.changeText(event.target.value);}}}}}); </script>

兄弟之間的通信

和上面介紹的父子之間通信是一樣的，因為任何連個子組件之間都會擁有一個共同的父級組件，所以兄弟組件之間的通信就是子1向父，然后父向子2，這樣來達到兄弟之間組件的通信

Vuex - 狀態管理通信

跨組件通信的一種實現方式

• 用到就封裝一個組件.js
• 組件.js

// 設置屬性：state const state = {count = 0; } // 設置方法：mutaions const mutaions = {increment(_state){_state.count += 1;} } // 執行方法 const actions = {increment(_content){_content.commit('increment');} } // 暴露 export default{state,mutaions,actions }

• 集合實例化 store.js

import Vue from 'Vue'; import Vuex from 'vuex'; // 引入組件.js import transition from './transion.js'; // 實例化對象 const store = new Vue.Store({modules:{transition} }); // 暴露對象 export default store;

• 主入口app.js實例化vuex對象

// 引入vuex對象 import store from './vuex/store.js'; // 實例化vuex對象 new Vue({el:"#app",router,store,render:h=>h(app) });

• 各組件之間調用

1.調用參數

$store.state.組建名.屬性

2.調用方法

$store.dispatch('事件名');

總結

以上是生活随笔為你收集整理的Vue笔记（六）——Vue组件通信Vuex的全部內容，希望文章能夠幫你解決所遇到的問題。

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