<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>混合多个vue完整对象</title>
</head>
<body>
<div id="app" >
<!-- 点击这里是为了看看vue是否把this对象清空搞入自己的对象 -->
<!-- 结果是:有vue的代理对象,说明js的this对象被清空 -->
<div @click="myfunc">点击</div>
{{msg}}xxxww
<lk></lk>
{{this.$options.age}}
<!-- 拿到age的值 -->
</div>
</body>
<template id="btn">
xxxxxxxxx
</template>
<script src="js/vue3.js">
</script>
<script type="text/javascript">
const myMix={
age:10,
data(){
return{msg:'xxx'};
},
template:"#btn"
}
const app=Vue.createApp({
mixins:[myMix],//用数组的形式声明混合的对象,事实上与组件的使用差不多,只是组件用component声明
data(){
return {msg:'ssww'}//使用混合器,数据优先使用app的,组件也是
},
components:{lk:myMix},
methods:{
myfunc(){
console.log(this)
}
}
});
app.mount("#app");
</script>
</html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
