vue3+ts 子父传值

在Vue 3中，可以使用`props`和`emit`来实现子父组件之间的传值。

1. 子组件接收父组件传递的值：
在子组件中，使用`props`选项来声明接收的属性，并在模板中使用它们。

<template>
  <div>
    <p>父组件传递的值：{{ fatherInfo }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  props: {
    fatherInfo: {
      type: String,
      required: true
    }
  }
}
</script>

2. 父组件向子组件传递值：
在父组件中，使用`v-bind`指令将数据传递给子组件的属性。

template>
  <div>
    <child-component :fatherInfo="info"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      info: '这是父组件传递的值'
    }
  }
}
</script>

3. 子组件向父组件传递值：
在子组件中，使用`emit`方法触发自定义事件，并将需要传递的值作为参数。

<template>
  <div>
    <button @click="sendDataToParent">向父组件传递值</button>
  </div>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  emits: ['childEvent'],
  methods: {
    sendDataToParent() {
      this.$emit('childEvent', '这是子组件传递的值');
    }
  }
}
</script>

在父组件中，使用`v-on`指令监听子组件触发的事件，并在方法中接收传递的值。

<template>
  <div>
    <child-component @childEvent="receiveDataFromChild"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveDataFromChild(value) {
      console.log('接收到子组件传递的值：', value);
    }
  }
}
</script>