vue中的method调用method,且解决调用后this指向问题

export default {
  data() {
    return {
      hello:"你好"
    }
  },
  methods:{
    open(that) {
      that.hello = "hello world!"
    },
    close() {
      this.$options.methods.open(this)
    }
  }
}

close函数调用open函数,close函数里调用的open函数的参数this赋值给that,这样可以通过that调用到data中的hello。

Vue项目调用一个方法通常有几种常见的方式,以下是其的几种: 1. **直接调用**: 在模板,可以直接通过`.call()`或`.apply()`方法将方法作为属性访问,传入参数执行。例如,如果你有一个名为`sayHello(name)`的方法: ```html <button @click="sayHello('John')">点击问候</button> ``` ```js methods: { sayHello(name) { console.log(`Hello, ${name}!`); } } ``` 2. **在事件处理器调用**: 如果你想在某个事件触发执行方法,可以在事件监听器调用。比如`@keyup.enter`事件: ```html <input v-model="message" @keyup.enter="handleInput"> ``` ```js methods: { handleInput() { this.sayHello(this.message); } } ``` 3. **作为组件内的方法调用**: 如果你在组件内部需要调用其他组件的方法,可以使用自定义事件($emit)或`props`来传递信息给父组件,再由父组件调用。 ```js methods: { sendDataToParent(data) { this.$emit('parentMethod', data); } } ``` 父组件: ```html <child-component @parentMethod="handleDataFromChild"></child-component> ``` ```js methods: { handleDataFromChild(data) { // 在这里处理数据 } } ``` 4. **在生命周期钩子调用**: Vue的生命周期钩子允许你在特定阶段执行操作。例如,在`created`、`mounted` 或者 `updated` 钩子调用方法: ```js created() { this.init(); }, methods: { init() { // ... } } ``` 以上就是Vue项目常见的方法调用方式。记住,在调用方法,确保已经实例化了Vue实例并且该方法属于Vue实例的`methods`对象或组件内定义的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值