如何在App.vue中通过双大括号{{}}展示SearchBar组件输入的搜索词

你只需要修改App.vue的代码，新增响应式变量存储子组件传递的搜索词，再用双大括号渲染即可，SearchBar.vue现有代码无需改动。

修改后的App.vue完整代码 #

<template>
  <!-- 你需要展示搜索词的位置用双大括号渲染searchTerm变量 -->
  <p>用户输入的搜索词：{{ searchTerm }}</p>
  <SearchBar @emitTermSearch="onTermSearch"></SearchBar>
</template>
<script>
import SearchBar from "./components/SearchBar";
export default {
  name: "App",
  components: {
    SearchBar
  },
  // 新增响应式数据存储搜索词
  data() {
    return {
      searchTerm: ''
    }
  },
  methods: {
    onTermSearch(emitTermSearch) {
      // 把字组件传上来的输入值赋值给响应式变量
      this.searchTerm = emitTermSearch
      console.log(emitTermSearch);
    }
  }
};
</script>

逻辑说明 #

• Vue的双大括号只能渲染当前组件实例上的响应式数据，你之前没有声明对应的存储变量，所以没办法直接渲染子组件传上来的参数
• 子组件通过$emit触发的自定义事件，参数只能在绑定的事件回调函数里拿到，赋值给响应式变量后才会触发视图更新，渲染到页面上

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