VUE的通讯

VUE的通讯

值的传递

1.子组件获取父组件的值

父组件声明:qwe=“value”
子组件使用props:{qwe:{}}，qwe就是父组件的传的值

//父组件：parent.vue
<template>
    <div class="parent">
        <children :qwe="value"></children>
    </div>
</template>
<script>
    import children from "./children";
    export default {
        data() {
            return {
                value: "parent",
            };
        },
        components: {
        children: children
        },
    };
</script>

//子组件：child.vue
<template>
    <div class="children">
        {{ qwe }}
    </div>
</template>
<script>
    export default {
        props:{
            qwe:{
                type:String,//类型为字符窜(可有可无)
                default:"123" //可以设置默认值(可有可无)
            }
        },
    };
</script>

---

2.父组件获取子组件的值

• 子组件内部主动传数据给父组件，由父组件监听接收（由子组件中操作决定什么时候传值）
  子使用 $emit(eventname,option)触发事件
  父组件使用v-on:eventname="wathChildEvent"接收，wathChildEvent(val)函数的参数（val）就是传过来的值

//父组件
<template>
    <div class="parent">
        <children v-on:childevent='wathChildEvent'></children>//接受的中间站
    </div>
</template>
<script>
    import children from "./children";
    export default {
        components: {
            children: children
        },
        methods:{
            wathChildEvent(val){//监听子组件触发的事件的方法，参数为子组件的传来的数据
                console.log(val);
            }
        }
    };
</script>

//子组件
<template>
    <div class="children">
        <button @click="childrenRun">{{ msg }}</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                msg: "子组件触发",
                text:'这是子组件的数据，将有子组件操作触发传给父组件'
            };
        },
        methods: {
            childrenRun() { 
                this.$emit('childevent',this.text);//声明事件 childevent
            },
        },
    };
</script>

• 通过父组件决定子组件什么时候传值给父组件，然后再监听接收 （由父组件中操作决定什么时候传值）（整个组件传递）
  通过在父组件的子组件使用中使用ref=“child”
  然后在父组件中通过this.$refs[‘child’]能获取整个子组件
  调用子组件的childrenRun方法就能和第一点一样了

//父组件
<template>
    <div class="parent">
        <children ref="child"></children>//声明子组件
    </div>
</template>
<script>
    import children from "./children";
    export default {
        components: {
            children: children
        },
        mounted(){
            this.$refs['child']//获取整个子组件
        },
    };
</script>

---

3.非父子组件的值传递（整个组件传递）

<1>创建一个新Vue的实例，让各个兄弟共用同一个事件机制（关键点）

//common.js
import Vue from 'vue'
export default new Vue()

<2>传递数据方，通过事件触发$emit(方法名，传递的数据)

//children(兄弟A组件)
<template>
    <div class="children">
        <button @click="childrenRun">组件触发</button>
    </div>
</template>
<script>
    import common from "./common"
    export default {
        methods: {
            childrenRun() { 
                common.$emit("aevent",this)//发送整个自己（this）、一个信息（this.value）、函数...
            },
        },
    };
</script>

<3>接收数据方，在mounted()钩子函数(挂载实例)中 触发事件$on(方法名，callback(接收数据的数据))，此时callback函数中的this已经发生了改变，可以使用箭头函数。(要不然函数的this指向common，参考文章最后代码)

//page1(兄弟B组件)
<template>
    <div>page1</div>
</template>
<script>
    import common from "./common"
    export default {
        mounted(){
            common.$on("aevent",(val)=>{//监听事件aevent，回调函数要使用箭头函数;
                console.log(val);//打印结果：我是兄弟A组件
            })
        }
    }
</script>

---

方法的调用

1. 子组件调用父组件的方法
   this.$parent.parentRun()
2. 父组件调用子组件的方法
   参考父组件获取子组件的值的第二点
3. 非父子组件的方法调用
   参考非父子组件的值传递

---

点击查看详细的函数this的指向
点击查看详细的JavaScriptthis的指向

document.addEventListener('click', () => {
    console.log(this); // window
}, false);

document.addEventListener('click', function() {
    console.log(this); // #document对象
}, false);