vuemixins混入代码片段
时间: 2023-11-15 17:59:26 浏览: 34
Vue mixins(混入)是一种非常灵活的方式,可以在多个组件之间共享代码。混入对象可以包含任意组件选项,当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。下面是一个Vue mixins的代码片段:
// 定义一个混入对象
import Vue from 'vue'
export const myMixin = {
data(){
return { }
},
created: function () {
this.hello(1)
},
methods: {
hello: function (num) {
console.log('hello from mixin!',num)
}
}
}
// 在组件中引用混入对象
<template>
<!-- 组件模板 -->
</template>
<script>
import { myMixin } from '@/mixins/myMixin'
export default {
mixins: [myMixin],
data() {
return { }
},
created: function () {
this.hello(2)
},
}
</script>
在上面的代码片段中,我们首先定义了一个名为myMixin的混入对象,它包含了一个data属性和一个methods属性,其中methods属性包含了一个名为hello的方法。在组件中,我们通过mixins选项引入了myMixin混入对象,并在created生命周期中调用了hello方法。由于引入了myMixin混入对象,所以我们可以在组件中使用myMixin里面的方法和数据。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)