脚本宝典收集整理的这篇文章主要介绍了Vue笔记(六)——Vue组件通信&Vuex,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
思路:定义子组件的属性(自定义),父组件赋值给子组件
思路:定义子组件的属性-ref="a",父组件通过:this.$refs.a.子组件方法();
思路:父组件通过:this.$children[0].子组件方法();
$parent.$emit("父组件自定义事件");
思路:父组件在组件的生命周期(mounted)用$on定义事件,子组件用this.$parent.$emit("父组件自定义事件");
$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>
思路:父组件在调用子组件时用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,这样来达到兄弟之间组件的通信
跨组件通信的一种实现方式
// 设置属性: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
}
import Vue from 'Vue';
import Vuex from 'vuex';
// 引入组件.js
import transition from './transion.js';
// 实例化对象
const store = new Vue.Store({
modules:{
transition
}
});
// 暴露对象
export default store;
// 引入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全部内容,希望文章能够帮你解决Vue笔记(六)——Vue组件通信&Vuex所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。