Question

我的主要组件使用父组件，而动态组件使用 v-bind：is =“ componentName ”，如下所示：

父模板：

<li class='list-inline-item g-mx-4 g-mt-10'>
  <component v-bind:is="componentName"></component>
</li>

和代码：

 export default {

    data: function(){
             return  {
               componentName : "componentA"
             },
     },
    components: {
        componentA: {
            template : "<div>A</div>" 
        },
        componentB: {
          template : "  <div>B</div>"
        }
     }

我想切换该组件以显示从子组件向 componentName 发送一个新值，但是我不确定是否必须使用emit或watch或...？

我想在没有vuex的情况下做到这一点。

Answer 1

是的，使用发射。在您的父组件中执行以下操作：

<child-component @custom_event='methodName' />

在子组件的方法中：

this.$emit('custom_event')

Answer 2

我按照Loric的建议使用emit解决了这个问题。

我的新父组件现在是：

   <li class='list-inline-item g-mx-4 g-mt-10'>
       <component v-bind:is="componentName"  @custom_event='updateTest'></component>
   </li>

它有一个像这样的方法：

 methods: {
        updateTest() {
            const v = document.querySelector('meta[name="login-status"]').getAttribute("content");
            this.componentName =  (v!="") ? "componentLoggedOn" : "componentLoggedOff";
        },
    },

然后我向componentA组件（一个内联创建的组件）添加了一个新方法，该组件具有：

this。$ emit（'custom_event'， param ）;

注意： param 不使用，但以防万一...

从Vue.js中的子组件更新父组件

2 个答案: