在 Nuxt.js 中以编程方式创建组件

Question

我正在尝试以编程方式创建 nuxt.js 组件。我尝试了下面的方法，该方法在 Vue.js 中有效。但它似乎在 nuxt.js 中不起作用，因为它实例化了 Vue 对象上的组件。因此它无法访问其父级的数据。

  var ComponentClass = Vue.extend(component_to_use);
  var instance = new ComponentClass();
  instance.$mount(); // pass nothing
  this.$refs.container.appendChild(instance.$el);

我找不到在 Nuxt.js 中正确执行此操作的方法。有人知道怎么做这个吗？注意：我知道我可以将数据作为道具传递，但这效率很低。

Answer 1

尝试这个方法（使用 tirgger 和 refs ）

首先创建名为 myCompnoent 的公共组件

//myComponent
<template></template>
<script>
export default(){
   method:{
     myMethod(){
       console.log('event')
     },
     eventMethod(val){
       console.log(val)
     }
   }
   props:['trigger'],
   watch:{
     trigger(){
        this.myMethod();
     }
   }
}
</script>

接下来创建一个 js 文件并通过此方法使用 myCompnoent

import Vue from "vue";
import myComponent from "myComponent";
Vue.component("componentName", myComponent);

所以现在我们想使用 myComponent

<componentName $ref="compName"
               :trigger="trigger"></componentName>
<button @click="firstMethod()">first method</button>
<button @click="secondMethod()">second method</button>
<script>
 export default(){
   data(){
    trigger:0
   }    
 },
 methods:{
   firstMethod(){
     this.$refs.compName.eventMethod('text')
   },
   secondMethod(){
     this.trigger++
   }
 }
</script>