VUE3 setup父子传参 或者 父亲调用孩子的函数

1、父传子【props】

        1.1、父亲代码

<!--父亲-->
<template>

  <!--  1、父亲在组价上写要传的值-->
  <child :info="parentInfo"/>
</template>

<script lang="ts" setup>

import Child from "./child.vue";
const parentInfo = '我是父亲传给孩子的值'

</script>

        1.2、孩子代码

<!-- 孩子-->
<template>
  <div>我是孩子：{{ info }}</div>
</template>

<script lang="ts" setup>
//  1、在孩子上引入defineProps
import { defineProps } from 'vue'

//  2、使用efineProps接收值
defineProps({
  info: {}
})

// 附： 也可以这样接收, 这样取值的时候就是 props.info
const props = defineProps({
  info: {}
})

</script>

2、子传父 【子defineEmits触发事件，父用@xx接收事件】

        2.1、父亲代码

<!--父亲-->
<template>

  <!--  4、在父组价上写方法接收-->
  <child @sendFromChild="parentGetInfo"/>
</template>

<script lang="ts" setup>

import Child from "./child.vue";

// 5、自定义方法接收
const parentGetInfo = (e) => {
  console.log('e是父亲接收到子组件传过来的参数', e)
}

</script>

         2.2、孩子代码

<!-- 孩子-->
<template>
  <div @click="sendToParent">我是孩子：点我传给父亲</div>
</template>

<script lang="ts" setup>

// 前言，子传父如果只通过组件传参，那么只能子组件触发方法，父组件接收方法并调用方法才能传参
// 1、引入defineEmits
import { defineEmits } from 'vue'

// 2、定义emit， 数组内可以写多个 ['sendFromChild', 'xxxxxx', 'xxxx']
const emit = defineEmits(['sendFromChild'])

const sendToParent = () => {
  // 3、调用方法（去父组件接收）
  emit('sendFromChild', '我是孩子发给父亲的信息')
}

</script>

三、父取子【父组件通过子组件ref，子组件暴露defineExpose对象或者函数传参】

        3.1、父亲代码

<!--父亲-->
<template>

  <button @click="parentFunction">父亲的按钮</button>

  <!-- 1、在父组件上写ref -->
  <child ref="child"/>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Child from "./child.vue";

// 2、定义一个变量，变量名一定和上面子组件ref内的一致
const child = ref(null)

// 5、最后父亲就可以调用了
const parentFunction =() => {
  child.value.childFunction()
  console.log(child.value.childInfo, '孩子中的变量')
}

</script>

        3.2、孩子代码

<!-- 孩子-->
<template>
  <div>我是孩子</div>
</template>

<script lang="ts" setup>

import { defineExpose, ref } from 'vue'

// 3、孩子上的函数
const childFunction = () => {
  console.log('我是孩子，被父亲调用触发了')
}
// 3、孩子上的变量
const childInfo = ref("我是孩子里的信息")

// 4、一定要把让父亲调用的函数，或者读取的变量   用defineExpose给暴露出去
defineExpose({
  childFunction,
  childInfo
})

</script>

四、子封装 v-model供父组件绑定【单个】

        4.1、父亲代码

<template>
  <h1>{{ parentValue }}</h1>
  <Child v-model="parentValue" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Child from "./Child.vue";
const parentValue = ref("") // 可以从父组件修改
</script>

       4.2、孩子代码

<template>
  <input v-model="localValue"/>
</template>

<script setup lang="ts">
import {computed, defineEmits} from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  }
})
const emits = defineEmits(["update:modelValue"])

// 组件内的值
const localValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emits("update:modelValue", value)
  }
})

</script>

五、子封装 v-model供父组件绑定【多个】

        5.1、父亲代码

<template>
  <h1>0-->{{ parentValue }}</h1>
  <h1>1-->{{ parentValue1 }}</h1>
  <h1>2-->{{ parentValue2 }}</h1>
  <Child
      v-model:model-value="parentValue"
      v-model:model-value1="parentValue1"
      v-model:model-value2="parentValue2"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Child from "./Child.vue";
const parentValue = ref("")
const parentValue1 = ref("")
const parentValue2 = ref("")
</script>

        5.2、孩子代码

<template>
  <input v-model="localValue"/>
  <input v-model="localValue1"/>
  <input v-model="localValue2"/>
</template>

<script setup lang="ts">
import {computed, defineEmits} from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  },
  modelValue1: {
    type: String,
    default: ""
  },
  modelValue2: {
    type: String,
    default: ""
  }
})
const emits = defineEmits([
    "update:modelValue",
    "update:modelValue1",
    "update:modelValue2",
])

// 组件内的值
const localValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emits("update:modelValue", value)
  }
})
// 组件内的值
const localValue1 = computed({
  get() {
    return props.modelValue1
  },
  set(value) {
    emits("update:modelValue1", value)
  }
})
// 组件内的值
const localValue2 = computed({
  get() {
    return props.modelValue2
  },
  set(value) {
    emits("update:modelValue2", value)
  }
})

</script>

六、子封装 v-model供父组件绑定【方法二】【单个多个同理】

        6.1、父组件

<template>
  <h1>{{ parentValue }}</h1>
  <Child v-model="parentValue"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Child from "./Child.vue";
const parentValue = ref("")
</script>

        6.2、子组件

<template>
  <input v-model="localValue"/>
</template>

<script setup lang="ts">
import {computed, defineEmits, ref, watch} from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  }
})
const emits = defineEmits([
    "update:modelValue",
])

// 组件内的值
const localValue = ref("")

// 或者用 input的 @change方法
watch(() => localValue.value, ()=> {
  emits("update:modelValue", localValue.value)
})

watch(() => props.modelValue, ()=> {
  localValue.value = props.modelValue
})

</script>