vue 父组件触发子组件的事件

<template>
  <div>
    <headedr>
      <el-input placeholder="请输入关键字" v-model="searchWorld"></el-input>
      <el-button  @click="handleSearch">搜索</el-button>
    </headedr>

    <div>
      <news-center ref="news"></news-center>
    </div>
  </div>
</template>

<script>
import NewsCenter from './components/NewsCenter'
export default {
  data() {
    return {
      searchWorld: '',
    };
  },
  methods: {
    handleSearch() {  //搜索
      // console.log(this.searchWorld);
      this.$refs.news.onSearch(this.searchWorld)
    }
  },
  components: { NewsCenter },
}
</script>

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

在组件NewsCenter ：

<script>
export default {
  data() {
    return {
      keyWords: '',
      page: 1,
      size: 10,
      //...
    };
  },
  methods: {
    onSearch(searchWorld) {
      this.keyWords = searchWorld;
      this.getList();    // 调接口获取数据
    }，
    
    getList() {
      let params = {
        page: this.page,
        size: this.size,
        keyWords: this.keyWords,
        //...
      }
      //请求接口获取数据     
    }

  },
}
</script>