Vue script setup 父子组件modelValue数据双向绑定

Vue版本 3.2.31
1、父组件模板中,引入子组件时,通过v-model="testArgs"来绑定关系。在父组件中是v-model,在子组件中就是props的modelValue。
2、父组件加个按钮,先点一下,看到现在的值是'123'。
3、子组件先用defineEmits,来确定接收这个来至父组件的绑定关系。
4、子组件改变一下父组件的testArgs,在改变之前先打印,是“123”。
5、回到父组件点击一下再打印,就变成了456了。双向绑定成功。

//父组件
<template>
    <div class="parent">
        //1.定义绑定关系。
        <child v-model="testArgs"></child>
        //2.打印下是123.
        //5.子组件改了值以后,再来这里打印。看看父组件的这个值。已经变成了456
        <button @click="printXxx">父组件打印看看值</button>
    </div>
</template>

<script setup>
import {ref} from "vue";
import child from "@/components/child.vue";
const testArgs = ref('123');
function printXxx(){
    console.log(testArgs.value);
}
</script>

//子组件
<template>
    <div class="child"><button click="childPrint">子组件先打印,再改值。</button></div>
</template>
<script setup>
import {defineEmits,defineProps} from "vue";
//通过props来接收
const props = defineProps({
    modelValue: null
})
//3.绑定关系。
const emit = defineEmits(['update:modelValue']);

function childPrint(){
    //4改变值之前先打印一下。
    console.log(props.modelValue);//这时是123
    //这时将123变成了456,回父组件去看,确定两边绑定成功了。
    emit('update:modelValue','456');
}

</script>
Posted in PHP

发表评论

您的电子邮箱地址不会被公开。