在 Vue 中动态添加带有事件的不同组件

Posted 2023-02-23

【中文标题】在 Vue 中动态添加带有事件的不同组件

【英文标题】：Dynamically adding different components with events in Vue

【发布时间】：2020-12-03 18:22:59

【问题描述】：

我想创建一个自动添加的类似组件列表。

类似这样的：

用 Vue 进行动态组件渲染很简单，但是在这些组件中，父子之间的通信存在问题。 在子元素中是一个按钮，当用户点击它时，父元素中的计数器应该会发生变化。

类似这个例子：

const Reusable = 
  template: '<div> name   bar <button @click="doClick">Click</button></div>',
  
  props: 
    name: 
      type: String
    
  ,
  methods: 
    doClick() 
        console.log("clicked");
      this.$emit("clicked");
    
  ,
  data () 
    return 
      bar: 'Bar'
    
  


const App = new Vue(
  el: '#app',
  
  data: 
    items: [],
    value: 0,
  ,
  
  methods: 
    onClick()  //I want to run this method 
      console.log("onClick method");
      this.value = this.value + 1;
    ,
    addComponent () 
      const renderComponent = 
        render (h)          
          return h(Reusable, 
            class: ['foo'],
            
            props:  
              name: 'Foo'
            ,
            on: 
                clicked() 
                console.log("on clicked in Reusable");
                this.onClick(); //why this method cannot be called?

              ,
            ,
/*          events: 
              clicked: this.onClick()
             */
          )
        
      
      
      this.items.push(renderComponent)      
    
  
);

#app 
  padding: 5rem;

<link href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component v-for="item in items" ref="itemRefs" :is="item" :key="item.name"></component>
  <div> value </div>
  <button @click="addComponent">Add Component</button>
</div>

【参考方案1】：

您可以完全摆脱$emit 并使用@click.native="value++"：

const Reusable = 
  template: '<div> name   bar <button @click="doClick">Click</button></div>',

  props: 
    name: 
      type: String
    
  ,
  methods: 
    doClick() 
      console.log("clicked");
      this.bar = 'Baz';
    
  ,
  data() 
    return 
      bar: 'Bar'
    
  


const App = new Vue(
  el: '#app',

  data: 
    items: [],
    value: 0,
  ,

  methods: 
    addComponent() 
      const renderComponent = 
        render(h) 
          return h(Reusable, 
            class: ['foo'],

            props: 
              name: 'Foo'
            ,
          )
        
      

      this.items.push(renderComponent)
    
  
);

#app 
  padding: 5rem;

<link href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component v-for="item in items" ref="itemRefs" :is="item" :key="item.name" @click.native="value++"></component>
  <div> value </div>
  <button @click="addComponent">Add Component</button>
</div>

【讨论】：

那会很好，但如果我想在方法doClick 中添加更多内容怎么办（也许更多逻辑）

它仍然可以工作，我已经更新了我的 sn-p 所以 doClick 将 Bar 更改为 Baz。