Vue从入门到实战：混入

来自CloudWiki
跳转至： 导航， 搜索

混入(mixin)提供了一种非常灵活的方式，来分发Vue组件中的可复用功能，

一个混入对象可以包含任意组件选项，

当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<my-component></my-component>
		</div>
		<script type = "text/javascript">
			// 定义一个混入对象
			var myMixin = {
				created() {
					this.startMixin()
				},
				methods: {
					startMixin: function () {
						document.write('欢迎来到混入实例')
					}
				}
			};
			// 定义一个组件，使用这个混入对象
			var Component = Vue.extend({
				mixins: [myMixin],
				template: '<p>Vue.js无难事</p>',
			})
			
			// 创建根实例
			new Vue({
			  el: '#app',
			  components: {
			  	MyComponent: Component
			  }
			})
		</script>
	</body>
</html>

选项合并

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

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

混入对象的钩子在组件自身钩子之前调用 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<my-component></my-component>
		</div>
		<script type = "text/javascript">
			// 定义一个混入对象
			var myMixin = {
			  data: function () {
			    return {
			    	// 混入对象的数据属性
			    	title: 'VC++深入详解',
			      message: '很好，很强大'
			    }
			  },
			  created(){
			  	document.write('混入对象的钩子被调用<br>')
			  }
			}
			// 定义一个组件，使用这个混入对象
			var Component = Vue.extend({
				mixins: [myMixin],
				data(){
					return {
						// 组件的数据属性
						title: 'Vue.js无难事'
					}
				},
				created(){
					document.write('组件钩子被调用<br>')
				},
				template: `
					<div>
						<h3>{{title}}</h3>
						<p>{{message}}</p>
					</div>
					`,
			})
			
			new Vue({
			  el: '#app',
			  components: {
			  	MyComponent: Component
			  }
			})
		</script>
	</body>
</html>

演示效果： 

Vue.js无难事
很好，很强大

混入对象的钩子被调用
组件钩子被调用

全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<my-component></my-component>
		</div>
		<script type = "text/javascript">
			// 为自定义的选项 myOption 注入一个处理器。
			Vue.mixin({
			  created: function () {
			    var myOption = this.$options.myOption
			    if (myOption) {
			      document.write(myOption);
			    }
			    else
			    	document.write('你怎么没有使用自定义选项？<br>')
		  	}
			})
			// 定义一个组件，使用自定义选项myOption
			var Component = Vue.extend({
				myOption: 'Hello, Vue.js',
				template: '<p>Vue.js无难事</p>'
			})
			
			// 根实例没有使用自定义选项myOption
			new Vue({
			  el: '#app',
			  components: {
			  	MyComponent: Component
			  }
			})
		</script>
	</body>
</html>

自定义选项合并策略

自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数： 

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回合并后的值
}

对于多数值为对象的选项，可以使用与 methods 相同的合并策略： 

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods
取自“http://www.openbrains.net/mediawiki/index.php?title=Vue从入门到实战：混入&oldid=25135”