vue $refs 传值

vue $refs 传值

父组件 /views/About.vue

<template>
  <div class="about">
    <button @click="getNews">父组件-传明天新闻按钮</button>
    <news ref="newsref"></news>
  </div>
</template>
<script>
import news from "../components/news";
export default {
  components: {
    news
  },
  methods: {
    getNews() {
      this.$refs.newsref.today("明天");
    }
  }
};
</script>

子组件 /components/news.vue

<template>
  <div>
    <button @click="today('今天')">子组件-传今天新闻按钮</button>
    <h2>新闻</h2>
  </div>
</template>

<script>
export default {
  methods: {
    today(val) {
      console.log("这是" + val + "新闻");
    }
  }
};
</script>