混入 — Vue.js

Z时代
2024-01-10
分类：综合

vue

1.混入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <script>
			var myMixin = {
			  created: function () {
				this.hello()
			  },
			  methods: {
				hello: function () {
				  console.log('hello from mixin!')
				}
			  }
			}
			// 定义一个使用混入对象的组件
			var Component = Vue.extend({
			  mixins: [myMixin]
			})
			var component = new Component() // => "hello from mixin!"
        </script>
    </body>
</html>

1.1 选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行"合并"。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <script>
			var mixin = {
			  data: function () {
				return {
				  message: 'hello',
				  foo: 'abc'
				}
			  }
			}
			new Vue({
			  mixins: [mixin],
			  data: function () {
				return {
				  message: 'goodbye',
				  bar: 'def'
				}
			  },
			  created: function () {
				console.log(this.$data)
				// => { message: "goodbye", foo: "abc", bar: "def" }
			  }
			})
        </script>
    </body>
</html>

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <script>
			var mixin = {
				created: function () {
					console.log('混入对象的钩子被调用')
				}
			}
			new Vue({
				mixins: [mixin],
				created: function () {
					console.log('组件钩子被调用')
				}
			})
        </script>
    </body>
</html>

值为对象的选项，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <script>
			var mixin = {
				methods: {
					foo: function () {
						console.log('foo')
					},
					conflicting: function () {
						console.log('from mixin')
					}
				}
			}
			var vm = new Vue({
				mixins: [mixin],
				methods: {
					bar: function () {
						console.log('bar')
					},
					conflicting: function () {
						console.log('from self')
					}
				}
			})
			vm.foo() // => "foo"
			vm.bar() // => "bar"
			vm.conflicting() // => "from self"
        </script>
    </body>
</html>

1.2 全局混入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <script>
			Vue.mixin({
			  created: function () {
				var myOption = this.$options.myOption
				if (myOption) {
				  console.log(myOption)
				}
			  }
			})
			new Vue({
			  myOption: 'hello!'
			})
			// => "hello!"
        </script>
    </body>
</html>