vue 父子组件传值

vue 父子组件传值

父组件-----------》传参-----------》子组件-------------》修改----------》传参-----------父亲组件

父组件代码

<template>
  <div>
    <h1>父组件</h1>
  </div>
  <br>
  <div>
    <p>你选择了：{{ checkedValues1 }}</p>
  </div>
  <br>
  <ChildComponent @checkbox-confirm="cb"></ChildComponent>
</template>

<script setup>
import ChildComponent from '../components/sunbin.vue' // 导入子组件
import { ref } from 'vue'; // 导入Vue的ref函数

// 创建ref变量checkedValues1，并初始化为['jack','kkkk']
const checkedValues1 = ref(['jack', 'kkkk'])

// 定义函数cb，参数为vl，将vl赋值给checkedValues1
function cb(vl) {
  checkedValues1.value = vl
}
</script>
 

子组件代码

<template>
  <div>
    <h1>父组件</h1>
  </div>
  <br>
  <div>
    <p>你选择了：{{ checkedValues1 }}</p>
  </div>
  <br>
  <ChildComponent @checkbox-confirm="cb"></ChildComponent>
</template>

<script setup>
import ChildComponent from '../components/sunbin.vue' // 导入子组件
import { ref } from 'vue'; // 导入Vue的ref函数

// 创建ref变量checkedValues1，并初始化为['jack','kkkk']
const checkedValues1 = ref(['jack', 'kkkk'])

// 定义函数cb，参数为vl，将vl赋值给checkedValues1
function cb(vl) {
  checkedValues1.value = vl
}
</script>