VUE 组件通信
公司用的是vue，刚入职熟悉代码时在公司里把vue又总结了一下
1. 父到子组件通信
A. props直接注册
1.在子组件标签上进行属性绑定
2.在子组件内部的props中进行属性注册
没有在props进行注册的属性会显示在行间里，所以我们设置
inheritAttrs:false
3.v-bind = "$attrs" 可以直接讲attrs里包含的所有属性直接传值
var vm = new Vue({
el: '#app',
//过一遍流程
data: {
content:'这是内容',
title:'这是标题'
},
// 定义局部组件
components: {
myContent:{
template:`<div><h3>{{ title }} </h3>
</div>`,
created() {
console.log(this.$parent)
this.title = this.$parent.title;
},
components:{
myP:{
props:['content'],
template:'<div>{{ content }}</div>'
}
}
}
}
})
B. $parent
子组件中使用this.$parent可以直接拿到父组件实例
C.$refs
1.this.refs拿到这个引用
<div ref="dom"> hi </div>
然后在组件中使用:
this.$refs.dom -- > 拿到原生dom，
2.你不能给多个dom设置引用 前面的会被后面覆盖
but 你通过3.v-for设置的引用 会返回一个数组
4.也可以放在组件上，会返回组件实例，
我们就可以干事了 调用组件上的属性或者方法
this.$refs.cmp.msg
D.provide & inject
provide: {
msg: 'helloworld',
content: '这是cotent'
},
components: {
myContent: {
//注入传家宝
inject:['msg'],
template: `<div> 儿子： {{ msg }}
<my-p></my-p>
</div>`,
components: {
myP: {
inject:['content'],
template: `<p>孙子：{{content}}</p>`,
}
}
}
}
2. 父到子组件通信
A.$listeners
通过$listeners，该指令包含了父作用域中的 (不含 .native 修饰器的)
v-on 事件监听器。它可以通过 v-on=”$listeners”
传入内部组件——在创建更高层次的组件时非常有用。
父组件 Parent.vue
<template>
<div>
I am Parent
Son: <Son @click="func"/>
</div>
</template>
<script>
import Son from './Son'
export default {
components:{
Son
},
methods:{
func(data){
console.log(data,'hi');
}
}
}
</script>
<style>
</style>
子组件 Son.vue
<template>
<div> iam son
<button @click="handleClick">click me</button>
</div>
</template>
<script>
export default {
methods:{
handleClick(){
console.log(this.$listeners.click()); //hi 父组件内的func函数被触发
console.log(this.$listeners.click('hi from son')); //hi from son,hi 父组件内的func函数被触发，并且’hi from son‘ 被传递到了父组件的func函数里
}
}
}
</script>
<style>
</style>
B.$emit
在此父组件里，@click="func"必须加上 .native, 点击事件才会被触发，
如果我们不加.native, 组件的点击事件就不知道什么时候被触发，
因为这个不是原生组件，因此，$emit用来解决这个问题，
就好比：一个孩子不哭，你拧他一下他才会哭，
比如：我们在子组件里使用$emit来触发外面的点击事件，
父组件里进行点击事件监听
父组件 Parent.vue
<template>
<div>
I am Parent
Son: <Son @click="func"/>
</div>
</template>
<script>
import Son from './Son'
export default {
components:{
Son
},
methods:{
func(data){
console.log(data,'hi');
}
}
}
</script>
<style>
</style>
```HTML
子组件 Son.vue
<template>
<div> iam son
<button @click="handleClick">click me</button>
</div>
</template>
<script>
export default {
methods:{
handleClick(){
console.log(this.$emit('click')); //主动触发父组件上的事件
console.log(this.$emit('click','HI')); //第二个参数为你想传入父组件函数的参数
}
}
}
</script>
<style>
</style>
补充：类似于 v-bind =''$attrs''， 我们还有v-on="$listeners",它可以把外面组件上所有的v-on事件绑定在一起 如：把父组件上所有的v-on事件 都绑定在子组件的button上
不仅仅是click这种函数系统自带的事件，$listener可以监听自定义事件，$emit可以触发自定义事件
C.$children
很简单，父组件里使用 this.$children, 但一般不推荐使用
