2020-02-15 Vue在使用extend动态挂载子组件时的

- 首先是父组件这边：

import Post from "../components/post.vue"; //首先制作一个vue组件
import Vue from "vue";  //import之
。。。略。。。
methods: { 
  popupPost: function() { //开始创建弹窗子组件
      const PostBox = Vue.extend(Post); //extend之
      let instance = new PostBox({ 
        propsData: { // 使用propsData向子组件传参，这里是关键!
          xclose: this.xclose //传入一个回调函数
          myVal: 'hello world' //传入一个普通变量
        }
      });
      let PostEl = instance.$mount().$el; //生成子组件的HTML部分
       //挂载到一个名叫post_location的div中，此处也可以是BODY
      document.getElementById("post_location").appendChild(PostEl);
    },
    xclose: function() {  //这个回调，给子组件完成任务后触发
      console.log("OK")
    }
。。。略。。。

- 然后是子组件这边：

export default {
name: "post",
props: {  // 在这里定义props
  xclose: Function, //回调
  myVal:String //普通变量
},
data() {
...略
methods: {
buttonClick: function() { //假设HTML中有一个按钮，触发了@click事件：
 console.log(this.myVal) // 显示传进来的普通变量，显示：hello world
 this.xclose(); //触发回调，调用主组件里的xclose，控制台会显示：OK
}

• 附录：回传变量：
  如果需要从子组件的中捎带变量出来，可以在回调的时候这样：

  this.xclose({ id: this.postId  }); //将变量 id 带出去
  

• 主组件通过event接收变量：

  methods: {
  clicked(event) {
    console.log(event.id);
  }