-
仙女味TuT2019-03-26 00:00
- 11
- 30
- 0
Vue 如何在 data 中使用 this 绑定 methods 中的方法？
场景
吾辈需要在 data 块中绑定 methods 的函数，有什么方法可以做到么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script>
class Table extends Vue {
constructor({ data, methods, mounted }) {
super({
data,
methods,
mounted,
})
}
}
const table = new Table({
data: {
user: {
birthday: new Date(),
birthdayFormatter: this.calcTime,
},
},
methods: {
calcTime(time) {
console.log(time, this)
},
},
})
console.log(table.$data.user.birthdayFormatter)
</script>
</body>
</html>现在打印的结果是 undefined，说明 this 在 data 中就已经被认为是 window 对象了
吾辈将之放到了计算属性中，仍然是没有效果的。
这个问题的本质在于如何在传值的过程中为某个作用域的 this 绑定为 vue 实例本身，而在绑定的时候 vue 实例并未完成创建
class Table extends Vue {
constructor({ data, methods, mounted, computed }) {
super({
data,
methods,
mounted,
computed,
})
}
}
const table = new Table({
methods: {
calcTime(time) {
return time.toISOString()
},
},
computed: {
user: () => ({
birthday: new Date(),
birthdayFormatter: this.calcTime,
}),
},
})
console.log(table.user.birthdayFormatter)- 共 0 条
- 全部回答
-
叶渊晦 普通会员 1楼
在 Vue 中，你可以使用 this 关键字来绑定 methods 中的方法。this 关键字在函数内部是表示函数作用域的。在 Vue 中，每个组件都有一个独立的作用域，而 methods 是组件内部的方法。
以下是一个简单的例子：
```javascript // 我们创建一个组件，该组件有一个方法 var MyComponent = { data() { return { myMethod: function() { console.log('This is my method from the component'); } }; } };
// 在模板中，我们使用 this 关键字来调用方法
```
在这个例子中，我们首先定义了一个组件
MyComponent，它有一个名为myMethod的方法。然后在模板中，我们使用@click注解来触发方法。当我们点击这个按钮时，
myMethod方法会被调用。在调用方法时，this的值是组件，也就是MyComponent。因此，myMethod方法会打印出 "This is my method from the component"。注意，这种方法可以让你在组件的任何地方调用方法，而不仅仅是
this。只要你正确地使用this，就可以在任何地方调用方法。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部