子元件向父元件傳參主要依靠 v-on 和  $.emit

這個是vue官網上給的方法呼叫，我們看看頁面上怎麼使用。

子元件 main_Header.vue

<template>
	<div>
		<div>{{count}}</div>
		<div v-for="(item, index) in list">{{item}}</div>
    <button v-on:click="sendMsg">向父元件傳參</button>  <!-- 這裡用簡單的繫結方法觸發傳參-->
	</div>
</template>

<script>
export default {
  name: 'main_header',
  props: ['count', 'list'],
  methods: {
    sendMsg: function () { //傳參方法
      this.$emit('headCallBack', '子元件的引數內容'); //第一個引數是父元件中v-on繫結的自定義回撥方法，第二個引數為傳遞的引數
    }
  }
};
</script>

<style>
</style>
 

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>子元件傳過來的內容：{{msg}}</div>
    <mainHeader :count="count" :list="list" v-on:headCallBack="headCall"></mainHeader> <!--通過v-on繫結方法，headCallBack為子元件中$emit()中第一個引數，headCall為回撥方法，引數就傳入這個方法中，看下面的方法-->
    <router-view/>
  </div>
</template>

<script>
import mainHead from './components/header/main_header';
var data = {
  list: ['java', 'html', 'css', 'js']
};
export default {
  name: 'app',
  data: function () {
    return {
      count: 0,
      list: data.list,
      msg: ''
    };
  },
  components: {
    mainHeader: mainHead
  },
  methods: {
    addCount: function () {
      let _this = this;
      setInterval(function () { _this.count++; }, 1000);
    },
    headCall: function (msg) { //回撥方法，接收子元件傳的引數
      this.msg = msg;
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      this.addCount();
    });
  }
};
</script>