Vue渲染按钮

作者: 满目山河
发布时间: 2024-03-31 09:52:01 (1月前)
转自：

3 条回复

0#
回复此人
至此 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只是扩大了@Philip的答案基本上，您无法在以编程方式创建的组件中访问父方法。您需要在子组件中指定方法。 </p> <pre> <code> const Hello = { props: ['text'], template: '<button v-on:click="this.tes"> Vue Generated</button> ', methods: { tes: function(){ alert('Teste'); }} }; new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, mounted(){ this.alertar() }, methods:{ alertar: function(event){ const HelloCtor = Vue.extend(Hello); var instance = new HelloCtor({ propsData: { text: 'HI :)' } }) instance.$mount() // pass nothing this.$refs.container.appendChild(instance.$el) }, tes: function(){ alert('Teste'); } } }) </code> </pre> <P> 在这里查看这个小提琴 <a href="https://jsfiddle.net/50wL7mdz/370645/" rel="nofollow noreferrer"> https://jsfiddle.net/50wL7mdz/370645/ </A> </p> <P> 但是在某些情况下，您可以使用以下方法访问父组件方法 <a href="https://vuejs.org/v2/api/#vm-parent" rel="nofollow noreferrer"> $父 </A> 我认为在以编程方式创建组件时不起作用的指令。 </p> </DIV>

编辑
1#
回复此人
trpnest | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 问题是您在父级内部创建子组件 <code> Vue </code> 包含绑定到的模板 <code> tes </code> 功能。这意味着孩子将寻找自己的方法 <code> tes </code> ，但它是你父母的财产，而不是孩子本身的财产，所以它永远无法在自己的范围内找到它。您必须将该函数添加到子组件： </p> <pre> <code> const Hello = { props: ['text'], template: '<button v-on:click="tes"> </button> ', methods: { tes: function(){ alert('Teste'); } } }; </code> </pre> </DIV>

编辑

登录后才能参与评论