mixins 如何传值
时间: 2023-11-21 17:56:23 浏览: 35
mixins可以通过组件选项中的data属性来传递值。具体来说,如果在mixin中定义了一个名为mixinData的属性,那么在组件中也定义一个名为mixinData的属性,那么组件中的mixinData属性值将覆盖mixin中的mixinData属性值。如果组件中没有定义mixinData属性,则使用mixin中的mixinData属性值。示例如下:
<<引用>>
```javascript
// mixin.js
export default {
data() {
return {
mixinData: 'Hello from mixin!'
}
}
}
// component.vue
import myMixin from "../mixins";
export default {
mixins: [myMixin],
data() {
return {
mixinData: 'Hello from component!'
}
},
mounted() {
console.log(this.mixinData); // 输出:Hello from component!
}
}
```
在上面的示例中,mixin中定义了一个名为mixinData的属性,其值为'Hello from mixin!'。组件中也定义了一个名为mixinData的属性,其值为'Hello from component!'。在mounted钩子函数中,输出了组件中的mixinData属性值,结果为'Hello from component!',说明组件中的mixinData属性值覆盖了mixin中的mixinData属性值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)