Javascript 如何通知父组件Vue动态组件中发生了什么?
我有一个生成动态组件的Vue组件,在该动态组件中有一个按钮的点击处理程序,该按钮用于进行Ajax调用。Ajax调用成功完成后,我想通知生成动态组件的组件Ajax调用已经完成。我该怎么做 该守则的基本结构如下:Javascript 如何通知父组件Vue动态组件中发生了什么?,javascript,vue.js,vuejs2,vue-component,vue-dynamic-components,Javascript,Vue.js,Vuejs2,Vue Component,Vue Dynamic Components,我有一个生成动态组件的Vue组件,在该动态组件中有一个按钮的点击处理程序,该按钮用于进行Ajax调用。Ajax调用成功完成后,我想通知生成动态组件的组件Ajax调用已经完成。我该怎么做 该守则的基本结构如下: <template> <div> <!-- Other markup here. --> <div class="contentPlaceholder"> </div>
<template>
<div>
<!-- Other markup here. -->
<div class="contentPlaceholder">
</div>
</div>
</template>
<script>
export default {
// Props, etc.
data: function () {
return {
// ...
content: 'long-html-string-that-contains-Vue-components'
};
},
mounted: function () {
Vue.component(`content-component`, {
template: `
<div class="content">
${this.content}
</div>
`,
data: function () {
return {
// Local data here.
};
}
methods: {
// Button in this.content markup clicked.
btnCicked: function () {
ajax.post('url', {
// Params
success: () => {
// Want to report back to the parent component
// that we're here now.
}
});
}
}
});
const res = Vue.compile(`
<content-component>
</content-component>
`);
new Vue({
render: res.render,
staticRenderFns: res.staticRenderFns
}).$mount(`.contentPlaceholder`);
}
}
</script>
但两者似乎都不起作用。谢谢。b勾选:=>{console.logthis}
尝试使用箭头函数保存上下文
另一个选项是创建一个已经有权访问外部的函数,并在方法中调用它
const method = () => {
console.log('I have access to outer this', this)
}
...
btnCicked: function () { method(); console.log('Local this', this) }
...
这是一个很好的观点,我已经相应地编辑了我的原始问题。基本上,我认为我不能这样做,因为我也在本地为动态组件声明了一个数据属性,所以我需要为这些方法保留这个属性。我的错。还有别的办法吗?谢谢。是的,这很有效。感觉有点邋遢,不像Vue,但效果不错。我现在会坚持这一点,但仍然想知道是否有更好的方法来实现这一点。谢谢。@HartleySan,EventBus呢?:是的,这个主意不错。谢谢。那么,我明天会适当地修改我的答案。可能是
const method = () => {
console.log('I have access to outer this', this)
}
...
btnCicked: function () { method(); console.log('Local this', this) }
...