vue3 父子组件传值

在vue3中，父子组件之间可以通过defineProps和defineEmits传值，

// 引入封装的组件

<template>
  <div>
    <ExampleSonDemoVue :visible="visible" @close="changeVisible" />
  </div>
</template>

<script setup lang="ts">
import ExampleSonDemoVue from "./ExampleSonDemo.vue";
import { ref } from 'vue'
const visible = ref(true)

const changeVisible = (val) => {
  visible.value = val
}
</script>

在父组件中：

• 引入你封装的子组件（在上面例子中就是ExampleSonDemoVue）；
• 通过:visible="visible"将父组件中的visible属性传递给子组件；
• 通过@close="changeVisible"监听子组件触发的close时间，并将其绑定到父组件的changeVisible方法上。

// 组件

<template>
  <div>
  
    {{ visible }}
    <button @click="closeFn">关闭</button>
    
  </div>
</template>

<script setup lang="ts">
defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['close'])
const closeFn = () => {
  emits('close', false)
}
</script>

在子组件中：

• 使用defineProps定义子组件的属性，其中visible属性的类型为Boolean, 默认值为false;
• 使用defineEmits定义子组件可以触发的事件，这里只定义了一个close事件；
• 使用@click监听关闭按钮的点击事件，并在点击时调用closeFn方法；
• 在closeFn方法中使用emits触发close事件，并传递false作为参数。