组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:
父传子
父组件如下:
<template>
<div>
<header :title="list">子组件</header>
</div>
</template>
<script>
import header from './header'
export default {
data () {
return {
list:1 //向组子件传递的值
}
},
components:{
header
}
}
子组件如下:
接收父子间传过来的值(1)
<template>
<div >
<h1>{{ list }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
};
},
props:{
list:{
type:Number
}
},
};
接收父子间传过来的值(2)
props: [“ilist”]
子传父
子组件如下:
<span>{{childValue}}</span>
<!-- 定义一个子组件传值的方法 -->
<input type="button" value="点击触发" @click="childClick">
export default {
data () {
return {
childValue: '我是子组件的数据'
}
},
methods: {
childClick () {
this.$emit('childByValue', this.childValue)
}
}
}
父组件如下:
<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<child v-on:childByValue="childByValue"></child>
methods: {
childByValue: function (childValue) {
// childValue就是子组件传过来的值
this.name = childValue
}
}
}
兄弟组件传子
可以用过一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发 e m i t 和 监 听 emit和监听 emit和监听on来实现组件之间的通信和参数传递,类似window的全局自定义事件。类似与子传父,只不过是利用一个新的vue示例作为媒介,而不是当前vue示例(this)
// 注册 bus.js
import Vue from 'vue';
export default new Vue;
// A 组件
<template>
<div class='a'></div>
</template>
<script>
import Bus from 'bus.js' ;
export default {
name: "a",
created() {
// 在需要的传递数据的时候调用sendData方法,这里模拟调用
this.sendData();
},
methods: {
sendData () {
Bus.$emit('listenToA', 'hello');
}
}
}
</script>
// B 组件
<template>
<div class='b'></div>
</template>
<script>
import Bus from 'bus.js';
export default {
name: "b",
monted() {
Bus.$on('listenToA', this.getAData);
},
methods: {
getAData (val) {
console.log(`a组件传递过来的数据: ${val}`); // hello
}
}
}
</script>
可以通过Vuxe
来实现兄弟组件传值
- 安装Vuex npm install vuex --save
- 新建 store/store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//state数据跟根组件data写法一模一样。也是储存数据的。
const state = {
AMsg: '',
BMsg: ''
}
//actions里面全是方法,与mutations区别只有这儿的方法可以使用异步操作,mutations方法使用异步,调试会混乱。
const mutations = {
//state是默认传参,就是上面的state,就算写aaa也是指向state。n为组件传过来的参数。
receiveAMsg(state, payload) {
// 将A组件的数据存放于state
state.AMsg = payload.AMsg
},
receiveBMsg(state, payload) {
// 将B组件的数据存放于state
state.BMsg = payload.BMsg
}
}
export default new Vuex.Store({
state,
mutations
})
- main.js:
import store from ‘./store/store’
new Vue({
el: ‘#app’,
router,
store,
components: { App },
template: ‘’
})
A 组件:
<template>
<div id="childA">
<h1>我是A组件</h1>
<button @click="transform">点我让B组件接收到数据</button>
<p>因为你点了B,所以我的信息发生了变化:{{BMessage}}</p>
</div>
</template>
<script>
export default {
data() {
return {
AMessage: "Hello,B组件,我是A组件"
};
},
computed: {
BMessage() {
// 这里存储从store里获取的B组件的数据
return this.$store.state.BMsg;
},
//或者
...mapState({
BMessage: state => state.BMsg
})
},
methods: {
transform() {
// 触发receiveAMsg,将A组件的数据存放到store里去
this.$store.commit("receiveAMsg", {
AMsg: this.AMessage
});
}
}
};
</script>
<style>
div#childA {
border: 1px solid black;
}
</style>
B 组件:
<template>
<div id="childB">
<h1>我是B组件</h1>
<button @click="transform">点我让A组件接收到数据</button>
<p>因为你点了A,所以我的信息发生了变化:{{AMessage}}</p>
</div>
</template>
<script>
export default {
data() {
return {
BMessage: "Hello,A组件,我是B组件"
};
},
computed: {
AMessage() {
// 这里存储从store里获取的A组件的数据
return this.$store.state.AMsg;
}
//或者
...mapState({
AMessage: state => state.AMsg
})
},
methods: {
transform() {
// 触发receiveBMsg,将B组件的数据存放到store里去
this.$store.commit("receiveBMsg", {
BMsg: this.BMessage
});
}
}
};
</script>
<style>
div#childB {
border: 1px solid green;
}
</style>