可以't从子组件获取要在父组件上执行的方法
Can't get method to execute on parent component from child component
当单击父组件中的一个子组件中的按钮时,我正试图在父组件上执行一个方法。我在Webpack中使用单文件组件。以下是子组件的代码:
<template>
<button v-on:click="add">Click</button>
</template>
<script>
export default {
methods: {
add: () => {
console.log('foo')
this.$dispatch('addClick')
}
}
}
</script>
父母的代码:
<template>
<div id="app">
<count :total="total"></count>
<click></click>
</div>
</template>
<script>
import count from './components/count.vue'
import click from './components/click.vue'
export default {
components: {
count,
click
},
data: () => {
return {
total: 0
}
},
methods: {
addToTotal: () => {
console.log('bar')
this.total += 1
}
},
events: {
addClick: 'addToTotal'
}
}
</script>
count
组件只是显示total
变量的h1元素。当我点击按钮时,"foo"会登录到控制台,但"bar"不会,总数也不会改变。你知道我做错了什么吗?提前感谢!
您的方法使用lambda表示法,这给了它们错误的this
。如果您使用function
,它将起作用。
Vue.component('click', {
template: '#clicker',
methods: {
add: function() {
console.log('foo')
this.$dispatch('addClick')
}
}
})
new Vue({
el: '#app',
data: () => {
return {
total: 0
}
},
methods: {
addToTotal: function () {
console.log('bar')
this.total += 1
}
},
events: {
addClick: 'addToTotal'
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<template id="clicker">
<button v-on:click="add">Click</button>
</template>
<div id="app">
<count :total="total"></count>
<click></click>
{{total}}
</div>
对count
组件的total
属性使用双向.sync
绑定类型修饰符,以便在父total
值更改时更新该值。这里有一个例子:
Vue.component('click', {
template: '<button v-on:click="add">Click</button>',
methods: {
add: function () {
this.$dispatch('addClick');
}
}
});
Vue.component('count', {
template: '<h1 v-text="total"></h1>',
props: {
total: {
type: Number,
twoWay: true
}
}
});
new Vue({
el: '#app',
data: {
total: 1
},
methods: {
addTotal: function () {
this.total++;
}
},
events: {
addClick: 'addTotal'
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
<div id="app">
<count :total.sync="total"></count>
<click></click>
</div>
相关文章:
- 加载服务器端渲染的React组件后执行脚本
- bind():您正在将一个组件方法绑定到该组件.React会自动为您执行此操作
- Vue.js 在组件渲染后执行事件触发器
- CakePHP - 从视图中调用组件的函数,并在单击按钮时执行它
- React+Redux.执行容器和转储组件中定义的所有方法/操作
- angularjs组件的执行顺序是什么
- ExtJS 按钮 2 上单击执行单击按钮 1 按组件
- React/Flux:从组件的渲染方法中触发一个动作,或者从组件中执行一个Rest调用
- 超时后在无状态组件中执行函数
- 如何更新一个单独的组件道具与阿波罗执行变异后
- 当组件在单元测试中呈现时,React - componentWillReceiveProps不会执行
- 在对另一个组件执行http请求时保持响应性
- 在react组件中执行js代码
- 避免在重用的php组件上重复执行代码
- 可以't从子组件获取要在父组件上执行的方法
- Angular 1.5组件回调绑定没有执行
- React,执行组件's函数导致Redux状态更改,从而卸载组件,此时函数返回
- KnockoutJS 自定义组件加载器未执行“loadViewModel”
- Angular2 组件的“this”在执行回调函数时是未定义的
- 是否有adobedreamweaver或其他执行预测PHP和/或Javascript的应用程序的附加组件?