1. 父组件传递数据给子组件
父组件数据如何传递给子组件呢?可以通过 props 属性来实现
父组件:
子组件通过 props 来接收数据:
<parent>
<child :child-msg="msg"></child>// 这里必须要用 - 代替驼峰
</parent>
data(){
return {
msg: [1,2,3]
};
}
方式 1:
props: ['childMsg']
方式 2 :
方式 3:
props: {
childMsg: Array // 这样可以指定传入的类型,如果类型不对,会警告
}
这样呢,就实现了父组件向子组件传递数据.
props: {
childMsg: {
type: Array,
default: [0,0,0] // 这样可以指定默认的值
}
}
2. 子组件与父组件通信
那么,如果子组件想要改变数据呢?这在 vue 中是不允许的,因为 vue 只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的.
子组件:
父组件:
<template>
<div @click="up"></div>
</template>
methods: {
up() {
this.$emit('upup','hehe'); // 主动触发 upup 方法,'hehe'为向父组件传递的数据
}
}
3. 非父子组件通信
<div>
<child @upup="change" :msg="msg"></child> // 监听子组件触发的 upup 事件, 然后调用 change 方法
</div>
methods: {
change(msg) {
this.msg = msg;
}
}
如果 2 个组件不是父子组件那么如何通信呢?这时可以通过 eventHub 来实现通信.
所谓 eventHub 就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.
let Hub = new Vue(); // 创建事件中心
组件 1 触发:
组件 2 接收:
<div @click="eve"></div>
methods: {
eve() {
Hub.$emit('change','hehe'); //Hub 触发事件
}
}
这样就实现了非父子组件之间的通信了. 原理就是把 Hub 当作一个中转站!
<div></div>
created() {
Hub.$on('change', () => { //Hub 接收事件
this.msg = 'hehe';
});
}
父组件于子组件通信解决了,但是如果子组件要有操作:
父组件
子组件
<!--
model
定义一个 方法事件 close 调用 closeModel 这个函数
-->
<Model v-bind:mdShow="mdShow" v-on:close="closeModel">
<span slot="message"> 加入购物车成功 </span>
<span slot="leftMessage"> 取消 </span>
<span slot="rightMessage"> 确认 </span>
</Model>
closeModel() {
this.mdShow = false; // 执行要执行的
}
就是性当与是,子组件通知父组件 我操作了,你在父组件该执行你要执行的了
<template>
<div class="model_container" v-show="mdShow == true" @click="closeModel">
<div class="model_wrap">
<div class="text">
<slot name="message"></slot>
</div>
<!-- <p>{{mdShow}}</p> -->
<div class="bottom">
<Button class="right_bd" @click="closeModel">
<slot name="leftMessage"></slot>
</Button>
<Button type="primary">
<slot name="rightMessage"></slot>
</Button>
</div>
</div>
</div>
</template>
methods: {
closeModel() {
// 调用父组件的 close 方法
this.$emit("close");
}
}
来源: http://www.bubuko.com/infodetail-2477392.html