搜索框的值传入子组件,并实时监听

父组件index.vue

// 在父组件index.vue中
// vantUI搜索框
 <van-search v-model="searchText"/>

// 子组件
 <search-suggestion  :search-text="searchText"/>

子组件 search-suggestion.vue

<template></template>

<script>
export default {
  name: 'search-suggestion',
  props: {
    // 接受父组件传递的参数
    searchText: {
      type: String,
      required: true
    }
  },
    //进行实时监听
  watch: {
    // 监听props中的对象
    searchText: {
      handler (value) {
        console.log(value)
      },
       //当页面一进入 马上开始监听
      immediate: true
    }
  }
}
</script>

猜你喜欢

转载自blog.csdn.net/autumnmn/article/details/125859638