目录mixin 混入组件 data 优先级高于 mixin data 优先级2 mixin 生命周期优先级mixin 中的生命周期函数和组件的生命周期函数都会执行,而且 mixin
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://unpkg.com/Vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const MyMixin = {
data() {
return {
number: 2,
count: 3
}
}
}
const app = Vue.createApp({
data() {
return {
number: 1
}
},
mixins: [MyMixin],
template: `
<div>number:{
<!-- -->{number}}</div>
<div>count:{
<!-- -->{count}}</div>
`
});
app.mount('#root');
</script>
</html>
mixin 混入可以在组件内部缺少数据时,使用mixin内的数据代替。
上述代码中,count 使用了 mixin 内的数据,由于内部 number 已经被定义,vue 优先使用内部的数据,再使用 mixin 的数据。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="Https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const MyMixin = {
created(){
console.log('mixin created')
}
}
const app = Vue.createApp({
mixins:[MyMixin],
created(){
console.log('app created')
}
});
app.mount('#root');
</script>
</html>
效果如下:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const MyMixin = {
data(){
return{
number:123
}
}
}
const app = Vue.createApp({
mixins:[MyMixin],
template:`<app/>`
});
app.component("app",{
template:"<div>number:{
<!-- -->{number}}</div>"
})
app.mount('#root');
</script>
</html>
使用 mixins:[myMixin] 是局部载入mixin的方式,子组件不能获得 mixins 的值
运行结果如下:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `<app/>`
});
app.mixin({
data() {
return {
number: 123
}
}
})
app.component("app", {
template: "<div>number:{
<!-- -->{number}}</div>"
})
app.mount('#root');
</script>
</html>
使用 app.mixin 挂载就是全局,组件可以自由使用。
效果如下:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const myMixin = {
value: 1
}
const app = Vue.createApp({
mixins: [myMixin],
value: 25,
template: `<div>{
<!-- -->{this.$options.value}}</div>`
});
app.mount('#root');
</script>
</html>
vue 中,自定义属性就是直接写到vue下的属性,使用 this.$options.value 即可访问。
结果如下:
组件 data,methods优先级高于 mixin data,methods 优先级
生命周期函数,先执行 mixin 里边的,再执行组件里边的
自定义的属性,组件中的优先级高于 mixin 属性的优先级。
到此这篇关于VUE mixin 使用的文章就介绍到这了,更多相关VUE mixin 使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: VUE mixin 使用示例详解
本文链接: https://www.lsjlt.com/news/172393.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0