如何从父组件清空子组件的v-model绑定值？

点击父组件的cleanDataForm按钮或sendData按钮时，需将子组件中v-model绑定的text值置为空字符串，尝试过props、computed、Vuex均未生效。

现有代码 #

父组件

<template>
    <div class="Main">
        <div class="comment">
            <Smiles />
            <div class="btns">
                <button id="btn--send" type="submit" @click="sendData">Send data</button>
                <button id="btn--clear" @click="cleanDataForm">clean data</button>
            </div>
        </div>
    </div>
</template>

子组件

<template>
    <div class="container">
        <textarea
            v-model="text"
            ref="smilesTextarea"
            placeholder="Введите комментарий"
        ></textarea>
        <button @click="showSimiles">😀</button>
    </div>
</template>

解决方案 #

方法一：父组件通过Ref调用子组件方法（推荐） #

这种方式逻辑直接，适合简单的父子组件交互。

子组件修改

新增清空文本的方法，维护自身的text数据：

<template>
    <div class="container">
        <textarea
            v-model="text"
            ref="smilesTextarea"
            placeholder="Введите комментарий"
        ></textarea>
        <button @click="showSimiles">😀</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            text: ''
        }
    },
    methods: {
        // 新增清空方法
        clearText() {
            this.text = ''
        },
        showSimiles() {
            // 保留原方法逻辑
        }
    }
}
</script>

父组件修改

给子组件添加ref，在按钮点击事件中调用子组件的清空方法：

<template>
    <div class="Main">
        <div class="comment">
            <!-- 添加ref属性 -->
            <Smiles ref="smilesComp" />
            <div class="btns">
                <button id="btn--send" type="submit" @click="sendData">Send data</button>
                <button id="btn--clear" @click="cleanDataForm">clean data</button>
            </div>
        </div>
    </div>
</template>

<script>
import Smiles from './Smiles.vue' // 确保正确引入子组件

export default {
    components: { Smiles },
    methods: {
        sendData() {
            // 保留原发送逻辑
            this.$refs.smilesComp.clearText()
        },
        cleanDataForm() {
            this.$refs.smilesComp.clearText()
        }
    }
}
</script>

方法二：通过Props+双向绑定实现 #

适合需要将子组件数据同步到父组件的场景，分Vue2和Vue3两种写法：

Vue 2.x 版本

子组件修改

通过props接收父组件数据，用$emit触发数据更新：

<template>
    <div class="container">
        <textarea
            :value="text"
            @input="$emit('update:text', $event.target.value)"
            ref="smilesTextarea"
            placeholder="Введите комментарий"
        ></textarea>
        <button @click="showSimiles">😀</button>
    </div>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: ''
        }
    },
    methods: {
        showSimiles() {
            // 保留原方法逻辑
        }
    }
}
</script>

父组件修改

使用.sync修饰符绑定数据，点击按钮时直接清空：

<template>
    <div class="Main">
        <div class="comment">
            <Smiles :text.sync="commentText" />
            <div class="btns">
                <button id="btn--send" type="submit" @click="sendData">Send data</button>
                <button id="btn--clear" @click="cleanDataForm">clean data</button>
            </div>
        </div>
    </div>
</template>

<script>
import Smiles from './Smiles.vue'

export default {
    components: { Smiles },
    data() {
        return {
            commentText: ''
        }
    },
    methods: {
        sendData() {
            // 保留原发送逻辑
            this.commentText = ''
        },
        cleanDataForm() {
            this.commentText = ''
        }
    }
}
</script>

Vue 3.x 版本

子组件修改

使用自定义v-model实现双向绑定：

<template>
    <div class="container">
        <textarea
            v-model="localText"
            ref="smilesTextarea"
            placeholder="Введите комментарий"
        ></textarea>
        <button @click="showSimiles">😀</button>
    </div>
</template>

<script setup>
import { computed } from 'vue'

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

// 计算属性实现双向绑定
const localText = computed({
    get() {
        return props.modelValue
    },
    set(val) {
        emit('update:modelValue', val)
    }
})

function showSimiles() {
    // 保留原方法逻辑
}
</script>

父组件修改

直接用v-model绑定数据，点击按钮清空：

<template>
    <div class="Main">
        <div class="comment">
            <Smiles v-model="commentText" />
            <div class="btns">
                <button id="btn--send" type="submit" @click="sendData">Send data</button>
                <button id="btn--clear" @click="cleanDataForm">clean data</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import Smiles from './Smiles.vue'
import { ref } from 'vue'

const commentText = ref('')

function sendData() {
    // 保留原发送逻辑
    commentText.value = ''
}

function cleanDataForm() {
    commentText.value = ''
}
</script>

内容的提问来源于stack exchange，提问作者VueFrontend