Question

在此示例中，如何从clicked在app2上触发ComponentA方法。

const app = Vue.createApp({});

app.component('ComponentA', {
    template: `<button @click="clicked" class='btn'>Click</button>`
});

const app2 = Vue.createApp({
   methods: {
     clicked() {
        this.clickCount += 1;
     }
   },

   render() {
     return Vue.h(app.component('ComponentA'), options);
   }
}).mount("#App");

Answer 1

从按钮单击事件处理程序中尝试发出一个名为clicked的事件，在渲染函数中，通过在其前面加上on来定义该事件，并在体内将第一个字母onClicked: (e) => {...}括起来该功能的运行this.clicked

let options = {}
options.baseUrl = "someurl.com";

const app = Vue.createApp({})
app.component('ComponentA', {
  template: `
        <button @click="$emit('clicked')" class='btn'>Click</button>
    `
});

const app2 = Vue.createApp({
  methods: {
    clicked() {
      console.log("clicked !!!")
      this.clickCount += 1;
    }
  },
  render() {
    return Vue.h(app.component('ComponentA'), {
      onClicked: (e) => {

        this.clicked()
      }
    }, options)
  }
}).mount("#app");

<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>

<div id="app" someVariable='some value'>


</div>

如何在Vuejs 3中使用渲染功能从子组件触发父组件上的方法

1 个答案: