vue 怎么在 export default 外调用this
时间: 2023-10-19 07:12:38 浏览: 42
在 `export default` 外部调用 `this`,可以通过将 `this` 赋值给一个变量来实现。例如:
```javascript
// MyComponent.vue
export default {
data() {
return {
message: 'Hello World'
}
},
methods: {
showMessage() {
console.log(this.message)
}
}
}
// 在 export default 外部调用 this
import MyComponent from './MyComponent.vue'
const vm = new Vue({
el: '#app',
data: {
myComponent: null
},
mounted() {
this.myComponent = new MyComponent()
console.log(this.myComponent.message) // 输出 Hello World
this.myComponent.showMessage() // 输出 Hello World
}
})
```
在上面的代码中,我们先将 `MyComponent.vue` 中的组件导入,并创建一个 Vue 实例,然后在 `mounted` 钩子函数中,将 `MyComponent` 实例化并赋值给 `vm.myComponent`,这样就可以通过 `vm.myComponent` 来访问组件中的属性和方法了。