【Vue】mixin 混入用法

文章目录

    • 全局混入
    • 局部混入

  • 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。
  • 一个混入对象可以包含任意组件选项。
  • 当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
  • mixin 中可以使用 data、methods、watch、directive、filter、钩子函数

全局混入

  • 示例:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			<button @click="test">调用mixin中的函数button>
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			//全局混入
			//mixin在使用中,是将相关代码拷贝一份放到组件中,如果和组件中的相关内容重复的话,采用就近原则
			Vue.mixin({
				methods: {
					test: function() {
						console.log("混入的函数被触发了");
					}
				}
			})
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
			})
		script>
	body>
html>
  • 运行结果:
    【Vue】mixin 混入用法_第1张图片

局部混入

  • 示例:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="app">
			{{msg}},逆转:{{reMsg}}
		div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			//局部mixin
			var mymixin = {
				data: {
					msg: "hello"
				},
				computed: {
					reMsg() {
						return this.msg.split("").reverse().join("");
					}
				}
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				//局部mixin进行注册
				mixins: [mymixin]
			})
		script>
	body>
html>
  • 运行结果:

【Vue】mixin 混入用法_第2张图片

你可能感兴趣的:(Vue,全家桶,vue.js,javascript,前端,mixin)