VUE简单组件通信

• [x] 1.prop组件通信
  • 1.简单理解
  • 2.多层嵌套
• [x] 2.使用ref进行组件通信
• [x] 3.$emit组件通信

1.prop组件通信

1.简单理解

有点类似于应式的感觉，我不管你要不要只要给你，那么你必须有一个props['teach'] 进行接收

<student teach="数学" ></student>

---

<teacher>{{teach}}</teacher>

props:['teach']

2.多层嵌套

1.级

<me age="18" name="smartom"></me>

2.级 age 和 name 都是可以改变的值 可以使用v-model?

<myage :value="age" ></age>
<name :value="name" ></name>

props:['name','age']

3.级别

<div>
我的年龄{{value}}
</div>

props:['value']

<div>
我的年龄{{value}}
</div>

props:['value']

2.使用ref进行组件通信

全局

this.$parent //获取父组件

this.$parent.$children //获取子组件

如果子组件有多个怎样区分这些组件？

<component1></component>
<component2></component>
<component3></component>

---

ref 说白了就是来给子组件定义标识

<component1 ref="ref1"></component>
<component2 ref="ref2"></component>
<component3 ref="ref2"></component>

子组件访问

this.$parent.$refs.ref1.$data

3.自定义事件通父组件传递 $emit $on

父组件定义自定义事件

<component1 @updateParentEvent="sasdf"></component>

data(){
    return {
        data:[],
    }
}
methods:{
    sasdf(data){
        
    }
}

子组件

methods:{
    onclickevent(){
        this.$emit("updateParentEvent",this.data);
    }
}