Vue3子组件传值父组件，父组件通知子组件

背景

大致框架是这样的，一个页面（index.vue）包含两个子页面（left.vue、right.vue）。需求是这样的，left.vue页面有一个下拉选择框，根据不同的选择，right.vue需要渲染不同的echarts图表。

思路

• left页面下拉选项发生改变，传值给父组件index
• index接收到left传的值，动态传值给right页面
• right页面监听到值发生改变，则刷新渲染echarts图表

代码

left.vue

<a-select v-model:value="typeValue" @change="onChange">
  <a-select-option value="1">一号</a-select-option>
  <a-select-option value="2">二号</a-select-option>
  <a-select-option value="3">三号</a-select-option>
</a-select>

const typeValue = ref('1')
const emit = defineEmits(['updateTypeValue']);
// 传值给父组件
const onChange = async (value: any) => {
  emit('updateTypeValue', { typeValue: typeValue.value });
}

index.vue

// 接收left的传值
<left @updateTypeValue="updateTypeValue" />
// 传值给right
<right :typeValue="typeValue"  />

import left from './components/left.vue'
import right from './components/right.vue'

const typeValue = ref('1')

// 接收left的传值
const updateTypeValue = (record) => {
  typeValue.value = record.typeValue
};

right.vue

// 页面上直接引用
{{ props.typeValue }}

const props = defineProps({
  typeValue: {
    type: String,
    default: '1'
  },
});

// 监听 typeValue变化
watch(
  () => props.typeValue,
  (open) => {
    open && nextTick(async () => {
      const typeValue = props.typeValue
      // todo 可以自定义操作...
    })
  },
)