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中，此处也可以是BODYdocument.getElementById("post_location").appendChild(PostEl);},xclose: function() {  //这个回调，给子组件完成任务后触发console.log("OK")}
。。。略。。。

- 然后是子组件这边：

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

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

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

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

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