1、Mixin混入
将课复用代码独立出来用于复用通过创建Mixin对象将复用代码放在Mixin对象中在根组件中添加mixins属性，通过数组来存放多个minxin对象（也就是把minin内容混入根组件中）基本案例：
<body><div id="app"></div><script>//定义一个minxin对象const myMixin={data () {return {msg:'测试文本',}},methods:{hello(){alert('hello world!')}},}//这里是根组件const app=Vue.createApp({mixins:[myMixin],template:`<div><h3>{{msg}}</h3><br/><button @click="hello">打个招呼</button></div>`})app.mount('#app')</script></body>
多个父组件复用mixin内容
<body><div id="app"></div><div id="app2"></div><script>//定义一个minxin对象const myMixin={data () {return {msg:'测试文本',}},methods:{hello(){alert('hello world!')}},}//这里是根组件const app=Vue.createApp({mixins:[myMixin],template:`<div><h3>{{msg}}</h3><br/><button @click="hello">打个招呼</button></div>`})const app2=Vue.createApp({mixins:[myMixin],template:`<div><h3>{{msg}}</h3><br/><button @click="hello">打个招呼</button></div>`})app.mount('#app')app2.mount('#app2')</script></body>
混入是一种融合而不是一种替换（根组件的原始data和methods等不会和新混入的mixin发生替代关系）如果混入的data和methods和原始的data和methods重名，则，优先执行原始的data和methodsmixin也可以使用生命周期钩子，如果和原始重名，两者的钩子都会执行，并且mixin的钩子优先级大于原始钩子（即先执行mixin钩子）
<body><div id="app"></div><div id="app2"></div><script>//定义一个minxin对象const myMixin={data () {return {msg:'测试文本',}},methods:{hello(){alert('hello world!')}},}//这里是根组件const app=Vue.createApp({data(){return {site:'',msg:'原始的message'}},methods: {change () {alert('hhaahah')}},mixins:[myMixin],template:`<div><h3>{{msg}}</h3><h2>{{site}}</h2><br/><button @click="hello">打个招呼</button><button @click="change">改变</button></div>`})app.mount('#app')</script></body>
2、Mixin自定义属性的问题
直接定义的属性不会自动放入data里，而是进入到$optiona里面通过this. $options.自定义属性名拿到具体的数据<body><div id="app"></div><div id="app2"></div><script>//定义一个minxin对象const myMixin={//自定义属性不会放在data里面，而是在$option里面age:100}//这里是根组件const app=Vue.createApp({data(){return {msg:'原始的message'}},mounted(){console.log(this.$options)},methods: {hello () {alert('hello world')}},mixins:[myMixin],template:`<div><h3>{{this.$options.age}}</h3><br/><button @click="hello">打个招呼</button></div>`})app.mount('#app')</script></body>
通过配置觉得使用自定义属性还是原始属性
实例名.config.optionMergeStrategies.age=（mixinValue，appValue）=>{
return mixinValue || appValue
}
<body><div id="app"></div><script>//定义一个minxin对象const myMixin={//自定义属性不会放在data里面，而是在$option里面age:100}//这里是根组件const app=Vue.createApp({data(){return {msg:'原始的message',}},//这里age是属性，不是dataage:99,mounted(){console.log(this.$options)},methods: {hello () {alert('hello world')}},mixins:[myMixin],template:`<div><h3>{{this.$options.age}}</h3><br/><button @click="hello">打个招呼</button></div>`})//这个age要和mixin里和app的属性名相同app.config.optionMergeStrategies.age=(mixValue,appValue)=>{return mixValue || appValue}app.mount('#app')</script></body>
3、全局配置mixin
直接对对应的app配置mixin
app.mixin({mixin数据内容})
案例
<body><div id="app"></div><script>//这里是根组件const app=Vue.createApp({data(){return {msg:'原始的message',}},mounted(){console.log(this.$options)},methods: {hello () {alert('hello world')}},template:`<div><h3>{{this.$options.age}}</h3><br/><button @click="hello">打个招呼</button></div>`})//全局配置mixinapp.mixin({//自定义属性不会放在data里面，而是在$option里面age:100})app.mount('#app')</script></body>
4、自定义指令–自定义全局指令
自定义全局指令全局指令使用根组件名.directive（指令名，对象）
<body><div id="app"></div><script>//这里是根组件const app=Vue.createApp({data(){return {msg:'原始的message',}},//通过自定义指令名获得了焦点template:`<div><input placeholder="请输入一些内容" v-myfocus></div>`})//自定义全局指令,focus是指令名称app.directive('myfocus',{//可以有自己的钩子，传入的变量名为el，是其起作用的元素mounted(el){el.focus()//默认的获取焦点函数}})app.mount('#app')</script></body>
5、自定义指令–自定义局部指令
需要创建一个局部组件局部组件需要包含挂载的指令定义在父组件中通过directives挂载这个子组件在父组件模板中使用这个组件<body><div id="app"></div><script>//创建一个子组件const sub={data(){return {}},myfocus:{mounted(el){el.focus()}},template: `<h3>我是一个子组件</h3>`}//这里是根组件const app=Vue.createApp({data(){return {msg:'原始的message',}},components:{'subcom':sub},//挂载局部指令,这里传入具有局部指令的局部指令就行directives:sub,//通过自定义指令名获得了焦点template:`<div><subcom></subcom><input placeholder="请输入一些内容" v-myfocus></div>`})app.mount('#app')</script></body>
6、自定义指令可以使用的钩子函数
<body><div id="app"></div><script>//创建一个子组件const sub={myfocus:{created(){console.log('created')},beforeMount(){console.log('created')},mounted(el){el.focus()},beforeUpdate(){console.log('beforeUpdate')},beforeMount(){console.log('beforeMount')},beforeUnmount(){console.log('beforeUnmount')},}}//这里是根组件const app=Vue.createApp({data(){return {isShow:true}},components:{'subcom':sub},//挂载自定义指令directives:sub,template:`<div v-show="isShow"><input placeholder="please input somthing" v-myfocus></div>`})app.mount('#app')</script></body>
7、自定义指令传入数据
以beforeMounted为例，其参数为
beforeMounted（el,binding,vnode,prevVnode）{}
el:绑定的元素
binding：传来的数据
也可以是挂载自定义指令时传入输入数据
directive（el,binding,vnode,prevVnode）{}
el:绑定的元素
binding：传来的数据
<body><div id="app"></div><script>//这里是根组件const app=Vue.createApp({data(){return {postData:{top:100,left:100}}},//这里pos是自定义的属性，是v-myfiexed绑定一个属性，属性值是postDatatemplate:`<div class="box" v-myfixed:pos="postData">测试文本</div>`})app.directive('myfixed',(el,binding)=>{console.log(el,binding)console.log(binding.arg)el.style.position='fixed'//通过binding拿到绑定过来的值el.style.left=binding.value.left+'px'el.style.top=binding.value.top+'px'})app.mount('#app')</script></body>
还可以绑定自定义指令时，使用不同的钩子函数
<body><div id="app"></div><script>//这里是根组件const app=Vue.createApp({data(){return {msg:'我的测试文本',postData:{name:'zhangsan',age:34}}},template:`<h3>我是模板</h3><div v-mymsg:pos="postData" v-mymm:pos="postData">{{mgs}}</div>`})app.directive('mymsg',(el,binding)=>{console.log(el)console.log(binding.arg)console.log(binding.value.name)console.log(binding.value.age)})app.directive('mymm',{mounted(el,binding){console.log(el)console.log(binding.arg)console.log(binding.value.name)console.log(binding.value.age)}})app.mount('#app')</script></body>
8、teleport传送门
teleport通过 to元素名称的形式，将teleport的元素传送到指定元素上（css选择器），如同机器猫的传送门比如传送到body上<head><meta charset="UTF-8"><title>Title</title><script src="js/vue3.js"></script><style type="text/css">.box{width: 300px;height: 300px;position: absolute;left: 50%;top:50%;transform:translate(-50%,-50%) ;background-color: red;}.mask{position: absolute;left: 0;top:0;right: 0;bottom: 0;background-color: black;opacity: 0.5;color: #fff;justify-content: center;align-items: center;display: flex;}</style></head><body><div id="app"></div><div></div><script>//这里是根组件const app=Vue.createApp({data(){return {msg:'我的测试文本',isShow:false}},methods:{btnClick(){this.isShow=!this.isShow}},//teleport通过 to元素名称的形式，将teleport的元素传送到指定元素上，如同机器猫的传送门template:`<div class="box"><button @click="btnClick">蒙版</button><teleport to="body"><div class="mask" v-show="isShow">{{msg}}</div></teleport></div>`})app.mount('#app')</script></body>
比如传送到特定选择器上
<head><meta charset="UTF-8"><title>Title</title><script src="js/vue3.js"></script><style type="text/css">.box{width: 300px;height: 300px;position: absolute;left: 50%;top:50%;transform:translate(-50%,-50%) ;background-color: red;}.mask{position: absolute;left: 0;top:0;right: 0;bottom: 0;background-color: black;opacity: 0.5;color: #fff;justify-content: center;align-items: center;display: flex;}#root{position: absolute;width: 200px;height: 200px;background-color: green;}</style></head><body><div id="app"></div><div id="root"></div><script>//这里是根组件const app=Vue.createApp({data(){return {msg:'我的测试文本',isShow:false}},methods:{btnClick(){this.isShow=!this.isShow}},//teleport通过 to元素名称的形式，将teleport的元素传送到指定元素上，如同机器猫的传送门template:`<div class="box"><button @click="btnClick">蒙版</button><teleport to="#root"><div class="mask" v-show="isShow">{{msg}}</div></teleport></div>`})app.mount('#app')</script></body>
Vue3（撩课学院）笔记04-高阶API-mixin混入 mixin自定义属性 全局配置mixin 自定义全局指令 自定义局部指令 自定义指令传入数据 teleport传送门
如果觉得《Vue3（撩课学院）笔记04-高阶API-mixin混入 mixin自定义属性 全局配置mixin 自定义》对你有帮助，请点赞、收藏，并留下你的观点哦！
