组件通信
之前也写了一篇关于组件之前通信的，最近又看到了这个东西，感觉之前写的不太全，于是乎这里写的更详细一点，也有一些之前写了，这里没提到，具体看是访问链接吧！！！！！！！
父子组件通信 https://blog.csdn.net/weixin_46087056/article/details/121221418
props 类型
props 接受数可以规定数据类型
props 后面跟类型，可以进行类型检测，检测的结果会在控制台输出，数据依然会传递 数组和对象的默认值需要通过一个工厂函数返回
props: {
num: Number,
str: String,
obj: Object,
arr: Array,
},
props 接受数据可以进行的操作
自定义检测 参数是传递的数据 函数内部自己判断 根据ruturn的boolean 值判断是否为通过 validator (value) { return true/false }
props: {
num: {
type: Number,
// required: true, // 自定义属性必须传递
default: 3, // 自定义属性不传递的时候默认值
},
obj: {
type:Object,
// default: { name: 123},
default: function() {
return { name: 123}
}
},
custom: {
//自定义检测
validator(value) {
console.log(value)
return ['success', 'error', 'danger'].indexOf(value) !==-1
}
}
}
父子组件通信—父传子-使用 prop
父组件在子组件标签中创建自定义标签 :fathershow="show" ，子组件通过 props 来接收 fathershow ： props: ['fathershow'],
props 里的数据为了保证数据的单向流动 只能使用不能修改
- 代码
<template id="father">
<div>
<button @click="toggle">toggle</button>
这里是父组件
<hr />
<!-- 通过自定义属性将数据传递给子组件 -->
<son :fathershow="show"></son>
</div>
</template>
<!-- 子组件 -->
<template id="son">
<div>
这里是子组件
<div v-show="fathershow" class="son"></div>
</div>
</template>
Vue.component('son', {
template: '#son',
props: ['fathershow'],
});
父子组件通信—子组件调用父组件方法、子组件给父组件传参 使用 自定义事件
在子组件标签上通过 @+自定义事件名 ，在组件内部通过 Eemit 可以触发自定义事件的绑定函数
$emit('自定义事件名'，传递的参数)
组件上的事件处理函数属于父层，自定义事件忽略大小写，在通过 emit 触发时需要注意
- 上代码
<div id="app">
<div v-if="show" class="parent"></div>
<hr />
<son @son-toggle="toggle"></son>
</div>
<!-- 子组件 -->
<template id="son">
<div>
这里是子组件
<button @click="handleToggle">控制父组件div的显示隐藏</button>
</div>
</template>
// 子组件
Vue.component('son', {
template: '#son',
methods: {
handleToggle() {
this.$emit('son-toggle');
},
},
mounted() {
console.log(this);
},
});
// 父组件
new Vue({
data: {
show: true,
},
methods: {
toggle() {
this.show = !this.show;
},
},
}).$mount('#app');
亲兄弟通信
有一个公共父元素并且结构不复杂的情况下，可以使用子穿父，父传子的方法
表兄弟通信—使用 eventBus
使用$on注册事件，使用$emit触发注册的事件
只要组件能访问到空的vue实例就能使用 $on 和 $emit
- 上代码
<!-- 父组件 -->
<div id="app">
<son1></son1>
<hr />
<son2></son2>
</div>
<!-- 子组件1 -->
<template id="son1">
<div>
这里是子组件1
<div class="test" v-if="show"></div>
</div>
</template>
<!-- 子组件2 -->
<template id="son2">
<div>
这里是子组件2
<button @click="toggle">切换</button>
</div>
</template>
let angule = new Vue();
new Vue({
components: {
// 子组件一
son1: {
template: '#son1',
data() {
return {
show: true,
};
},
methods: {
toggle(params) {
console.log('params', params);
this.show = !this.show;
},
},
mounted() {
console.log('son1', angule);
// 注册事件 custom 后面为 携带的参数
angule.$on('custom', this.toggle);
},
},
// 子组件二
son2: {
template: '#son2',
methods: {
toggle() {
// 触发事件 custom 后面为 携带的参数
angule.$emit('custom', 798);
},
},
},
},
}).$mount('#app');
ref
通过ref绑定一个元素 可以获取到真是的Dom
通过ref绑定一个组件 可以获取到组件的实例
也就是说，我们通过给子组件绑定 ref ，在父组件中就可以获取到子组件实例，也就是可以访问到子组件的 方法、变量，可以实现父子组件的通信
- 上代码
<!-- 父组件 -->
<div id="app">
<p ref="hehe">绑定p元素</p>
<!-- 给子组件绑定了ref 获取子组件的实例 -->
<son ref="xixi" class="son"></son>
</div>
<!-- 子组件 -->
<template id="son">
<div>
这里是子组件 {{show}}
<div v-if="show">test</div>
<button @click="toggle">改变</button>
</div>
</template>
// 全局子组件
Vue.component('son', {
template: '#son',
data() {
return {
show: false,
};
},
methods: {
toggle() {
console.log('执行了');
console.log(this);
this.show = !this.show;
},
},
mounted() {
// console.log(this)
},
});
// 父组件
new Vue({
data: {},
mounted() {
console.log(this);
console.log(this.$refs.hehe);
// 父元素里获得到子组件的实例 data methods
// 获取实例里的方法都能进行修改和触发， 慎用！
console.log(this.$refs.xixi);
setTimeout(() => {
this.$refs.xixi.show = true;
// console.log(this.$refs.xixi)
// this.$refs.xixi.toggle();
}, 1000);
},
}).$mount('#app');
