说下我对 vue 中 mixin 的一点理解
vue 中提供了一种混合机制 --mixins, 用来更高效的实现组件内容的复用. 最开始我一度认为这个和组件好像没啥区别.. 后来发现错了. 下面我们来看看 mixins 和普通情况下引入组件有什么区别?
组件在引用之后相当于在父组件内开辟了一块单独的空间, 来根据父组件 props 过来的值进行相应的操作, 单本质上两者还是泾渭分明, 相对独立.
而 mixins 则是在引入组件之后, 则是将组件内部的内容如 data 等方法, method 等属性与父组件相应内容进行合并. 相当于在引入后, 父组件的各种属性方法都被扩充了.
单纯组件引用:
父组件 + 子组件>>> 父组件 + 子组件
mixins:
父组件 + 子组件>>> new 父组件
作用: 多个组件可以共享数据和方法, 在使用 mixin 的组件中引入后, mixin 中的方法和属性也就并入到该组件中, 可以直接使用. 钩子函数会两个都被调用, mixin 中的钩子首先执行.
下面给大家介绍 vue mixin 的用法, 具体介绍如下所示:
1. 定义一个 js 文件(mixin.js)
- export default {
- data() {
- return {
- name: 'mixin'
- }
- },
- created() {
- console.log('mixin...', this.name);
- },
- mounted() {},
- methods: {}
- }
关于用法, vue 文档中有详细的介绍, 这里只介绍怎么在一个 vue 文件中使用 mixin.
2. 在 vue 文件中使用 mixin
- import '@/mixin'; // 引入 mixin 文件
- export default {
- mixins: [mixin]
- }
总结
以上所述是小编给大家介绍的 Vue 中 mixin 的用法详解, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/138757.htm