28.组件事件配合v-model使用

组件事件配合v-model使用

如果是用户输入,我们希望在获取数据的同时发送数据配合v-model来使用

复制代码
<template>
  <div>
    <h3>ComponentA</h3>
    <ComponentB @some-event="getHandle" />
    <p>ComponentA接受的数据:{{ message }}</p>
  </div>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
  data() {
    return {
      message: ""
     }
   },
  components: {
    ComponentB
   },
  methods: {
    getHandle(data) {
      this.message = data;
     }
   }
}
</script>

<template>
  <div>
    <h3>ComponentB</h3>
    <input v-model="searchText" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchText: ""
     }
   },
  watch: {
    searchText(newValue, oldValue) {
      this.$emit("someEvent", newValue)
     }
   }
}
</script>

("someEvent", newValue)

}

}

}

复制代码
相关推荐
Beginner x_u10 分钟前
前端八股文 Vue上
前端·javascript·vue.js·八股文
Strawberry_rabbit14 分钟前
Docker
前端
江拥羡橙14 分钟前
JavaScript异步编程:告别回调地狱,拥抱Promise async/await
开发语言·javascript·ecmascript·promise·async/await
前端康师傅14 分钟前
JavaScript数组中的陷阱
前端·javascript
用泥种荷花15 分钟前
【web音频学习(七)】科大讯飞Web端语音合成
前端
月弦笙音17 分钟前
【class 】static与 # 私有及static私有:系统梳理
前端·javascript·面试
forever_Mamba17 分钟前
CSS隐藏页面元素
前端·css
云枫晖18 分钟前
JS核心知识-对象继承
前端·javascript
w重名了10988220 分钟前
记录一次gnvm切换node版本显示内存溢出的报错
前端·node.js
我是天龙_绍20 分钟前
经常写CSS难的复杂的就害怕,不用怕,谈 渐变 不色变
前端