一. 子组件向父组件传值 - $emit 发射事件
父子组件传值.png
1. 子组件$emit发射事件A
this.$emit(event,...argument);
/*
* event: 要触发的事件
* argument: 传给父组件的参数
*/
例子：this.$emit('emitEvent',data,'lalala');
2. 父组件通过事件名A接收
<part-template @emitEvent = "ievent"></i-template>
methods:{
ievent(...data){
console.log('allData:',data); // data为包含传过来所有数据的数组，第一个元素是对象，第二个元素是字符串
}
}
二. 父组件向子组件传值 - props传值
1. 在父组件import引入封装出去的子组件
import dialogAttendee from "../../activity/component/dialogAttendee";
2. 在父组件视图模板中，通过 : 变量 占位传值
<dialogAttendee :dialogcascaderVisible="dialogcascaderVisible" @dialogClose="dialogClose"></dialogAttendee>
3. 在子组件通过props接收值，像本组件的data中定义的变量一样使用(this获取)
props:{
dialogcascaderVisible: {
type: Boolean,
default: false
},
reservation:Array,
}
三. watch监听值变化
- watch是一个对象，有键（要监听的对象），值（对象发生变化，执行的函数。
- 值可以是函数，也可以是函数名。
data: {
c: {
name: '小强',
age: 20,
sex: '男'
},
tdArray:["1","2"],
},
watch: {
a: function (val, oldVal) { //新值，旧值
console.log('new: %s, old: %s', val, oldVal)
},
b: 'someMethod', // 函数名
c: { // 包括选项的对象
handler: function (val, oldVal) { /* ... */ }, //监听变化时执行回调函数
deep: true，//监听对象的属性，需要深度监听；数组不需要。
immediate: true
}
'c.name':function(val,oldval){ //键路径必须加引号
console.log(val+"aaa")
}
}
四. 注意事项
- 在Vue2中组件的
props的数据流动只能单向流动。即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。- 父组件可以通过自定义属性向子组件传值；子组件通过
props来接收；子组件不能直接修改父组件传递过来的数据；子组件可以通过$emit()方法去间接调用父组件中的方法去更改父组件中的数据。
五. 父组件引用封装出去的子组件
<template>
<div>
<testComponent></testComponent> <!-- 3.通过定义的子组件名以标签形式直接使用 -->
</div>
</template>
<script>
import testComponent from './testComponent.vue' //1.先使用import导入你要在该组件中使用的子组件
export default {
components: {testComponent}, //2.然后在components属性中写入子组件
methods: {},
}
</script>
六. 动态组件
1.通过使用预定义的标签
< compnent >可以动态的绑定其is特性，使得多个组件有一个共同的挂载点，实现动态切换。
< keep-alive >标签会把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。
<button @click="toggle('home')">显示主页</button>
<button @click="toggle('list')">显示列表页</button>
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
//修改currentView变量，切换组件名
methods: {
toggle(com) { this.currentView = home; }
}
七. 兄弟组件传值：bus总线传值
- 非父子组件之间不能直接通讯，必须使用“代理人”，即中央数据总线过渡。
var bus = new Vue();
- A组件向B组件传值，A组件中要通过bus总线触发相应的事件；
bus.$emit('sendtoTwo', this.one)
- B组件要在钩子函数中监听相应的事件。
mounted() { // 监听sendtoTwo, 事件监听也可以写到created钩子函数
bus.$on('sendtoTwo', (data) => {
this.two = data;
})
}
