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

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 没有被使用，只是以防万一......