接收和發(fā)送的方法都是在子組建模板標(biāo)簽內(nèi)寫
比如：
<child :parentMsg='pMsg'></child>
<child @child-event='getFromChild'></child>

1、父組件向子組件傳值：

//先聲明一個父組件

var parent = {
  template: "<h1>我是局部父組件{{pMsg}}<child :parentMsg='pMsg'></child></h1>",//父組件通過子組件標(biāo)簽<child></child>綁定:parentMsg='需要傳遞的數(shù)據(jù)'
  data() {
    return {
      pMsg: 33
    };
  },
  components: {
    Child: child
  }
};

//再聲明一個子組件（注意實際聲明位置是在父組件之前，為了演示方便寫在父組件之后）

var child = { 
  template: "<h3>我是局部子組件{{parentMsg}}</h3>",
  props:['parentMsg'],  //子組件<child></child>標(biāo)簽內(nèi)的數(shù)據(jù)通過props從父組件接收數(shù)據(jù)
  data() {
    return {
      cMsg: 34
    };
  }
};

//最后，把父組件放到根元素內(nèi)（每個組件必須只有一個根元素）

export default {
  name: "App",
  data: () => {
    return {};
  },
  components: {
    Parent: parent
  }
};

2、子組件向父組件傳值：

• 子組件通過事件傳遞，父組件通過事件接收
  • 子組件：this.$emit('父組件接收的事件方法名',傳遞的數(shù)據(jù))
• 流程：
  • 子組件把$emit綁定到事件（click）上 => 點擊子組件=> 父組件內(nèi)的子組件模板<child>進(jìn)行接收（注意此處接收依然是子模板，與父模板無關(guān)）

//子組件：

var child = {
  template: "<button @click='emitToParent'>我是局部子組件</button>",
  data() {
    return {
      cMsg: 34
    };
  },
  methods: {
    emitToParent:function() {
      this.$emit("child-event", "我是子組件傳上來的數(shù)據(jù)");
    }
  }
};

//父組件：

var parent = {
  template:
    "<div>我是局部父組件{{pMsg}}<child @child-event='getFromChild'></child></div>", //注意此時接收還是在child模板內(nèi)接收
  data() {
    return {
      pMsg: 3
    };
  },
  components: {
    Child: child
  },
  methods: {
    getFromChild:function(data) {
      this.pMsg = data
    }
  }
};