Vue组件之间传值

接收和发送的方法都是在子组建模板标签内写
比如：
<child :parentMsg='pMsg'></child>
<child @child-event='getFromChild'></child>

1、父组件向子组件传值：

//先声明一个父组件

var parent = {
  template: "<h1>我是局部父组件{{pMsg}}<child :parentMsg='pMsg'></child></h1>",//父组件通过子组件标签<child></child>绑定:parentMsg='需要传递的数据'
  data() {
    return {
      pMsg: 33
    };
  },
  components: {
    Child: child
  }
};

//再声明一个子组件（注意实际声明位置是在父组件之前，为了演示方便写在父组件之后）

var child = { 
  template: "<h3>我是局部子组件{{parentMsg}}</h3>",
  props:['parentMsg'],  //子组件<child></child>标签内的数据通过props从父组件接收数据
  data() {
    return {
      cMsg: 34
    };
  }
};

//最后，把父组件放到根元素内（每个组件必须只有一个根元素）

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

2、子组件向父组件传值：

• 子组件通过事件传递，父组件通过事件接收
  • 子组件：this.$emit('父组件接收的事件方法名',传递的数据)
• 流程：
  • 子组件把$emit绑定到事件（click）上 => 点击子组件=> 父组件内的子组件模板<child>进行接收（注意此处接收依然是子模板，与父模板无关）

//子组件：

var child = {
  template: "<button @click='emitToParent'>我是局部子组件</button>",
  data() {
    return {
      cMsg: 34
    };
  },
  methods: {
    emitToParent:function() {
      this.$emit("child-event", "我是子组件传上来的数据");
    }
  }
};

//父组件：

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