Vue3组件通信

数据双向绑定：
- 单向绑定：Model==>View，数据的变化会导致视图更新
- 双向绑定：Model<=>View，单向绑定的基础上，更新视图也会使数据发生变化

子父组件通信流程（通过props+emit）

子组件在props中定义父组件传递过来的值，在emits中注册父组件传递过来的事件名，子组件内可以通过ctx.emit触发事件，即调用父组件传递过来的事件回调函数。
父组件声明属性和事件的回调并传给子组件即可
示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


// Comp.vue
<script>
export default {
  name: 'Child',
  props: {
    num: {
      type: Number
    }
  },
  emits: ['event'],
  setup(props, ctx) {
  	const click = () => ctx.emit('event', 10);
  	return { click }
 	}
}
</script>
<template>
  <h1>我是子组件，接收到的值为{{ num }}</h1>
  <button @click='click'>
    点我改变父组件的值
  </button>
</template>

// App.vue
<script>
import { ref } from 'vue'
import Child from './Comp.vue'
export default {
  name: 'App',
  components: { Child },
  setup(props, ctx) {
    const num = ref(1);
    const hook = (value) => {
      num.value += value
    };
    return { num, hook }
  }
}
</script>

<template>
  <h1>
    {{ num }}
  </h1>
  <Child :num='num' @event='hook'/>
</template>

props中接收的父组件传递过来的数据是只读的，不能直接改变
可以通过触发父组件的事件来间接改变props

v-model是props和emit的语法糖，比较适用于直接赋值更改数据的情况（input）

此时父组件无需传事件回调供子组件间接改变其props中接收到的值
Vue会自动注册事件回调函数（子组件在emits选项中声明该事件），但只有赋值的作用
子组件触发同样使用ctx.emit()
示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


// App.vue
<script>
import { ref } from "vue";
import Child from "./Comp.vue";
export default {
  name: "App",
  components: { Child },
  setup(props, ctx) {
    const num = ref(1);
    return { num };
  },
};
</script>

<template>
  <Child v-model:num="num" />
</template>

// Comp.vue
<script>
export default {
  name: "Child",
  props: {
    num: {
      type: Number,
    },
  },
  emits: ["update:num"],
  setup(props, ctx) {
    const click = () => ctx.emit("update:num", 10);
    return { click };
  },
};
</script>
<template>
  <h1>我是子组件，接收到的值为{{ num }}</h1>
  <button @click="click">点我改变父组件的值为10</button>
</template>

Contents