如何从父组件中清除子组件中的 v-model？

Question

请帮助我。我连续尝试了10个小时，但没有成功。我希望当我在父组件中单击 @click="cleanDataForm" 时，子组件中的 v-model 文本将为 "" 。我尝试用 props 来完成它，计算什么都没有。如果您有帮助，我将非常感激

//家长

<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"                          !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1
            ref="smilesTextarea"
            placeholder="Введите комментарий"
        ></textarea>
        <button @click="showSimiles">😀</button>
    </div>
</template>

我需要这个。当我单击“父级”中的“发送数据”时，文本将“”。我尝试使用 vuex 但没有任何结果。请帮忙

Answer 1

使用 props 和 emit 实现这一点的一种方法：

Vue.component('child', {
  template: `
    <textarea
      v-model="text" 
      ref="smilesTextarea"
      placeholder="Введите комментарий"
    ></textarea>
  `,
  props: ['clear'],
  data() {
    return {
      text: ''
    }
  },
  watch: {
    clear(newVal) {
      this.text = ''
      this.$emit('cleared')
    }
  }
})
new Vue({
  el: '#demo',
  data() {
    return {
      clear: false
    }
  },
  methods: {
    cleanDataForm() {
      this.clear = true
    },
    resetClear() {
      this.clear = false
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <button id="btn--clear" @click="cleanDataForm">clean data</button>
  <child :clear="clear" @cleared="resetClear"></child>
</div>