vue中Mixin混入的基本知识

最新推荐文章于 2024-04-22 00:20:36 发布

miao_zz

最新推荐文章于 2024-04-22 00:20:36 发布

阅读量572

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_37117408/article/details/115840022

版权

vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

vue中Mixin混入的基本知识

- 子组件中如何混入mixin，则父组件中传入通过props接收的值，将不会显示，只会显示mixin中的值

1.组件中data，methods的优先级高于mixin data，methods的优先级，并且两个一起存在的时候，只会执行组件的data，methods

2.生命周期函数：先执行mixin里面的，后执行组件里面的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="root"></div>
	</body>
	<script src="https://unpkg.com/vue@next"></script>
	<script>
		const myMixin = {
			data() {
				return {
					count: 1
				}
			},
			created() {
				console.log("我是混入生命周期")
			},
			methods: {
				handelClick() {
					console.log("我是混入方法")
				}
			}
		}
		const app = Vue.createApp({
			data() {
				return {
					count: 2
				}
			},
			mixins: [myMixin],
			created() {
				console.log("我是组件生命周期")
			},
			methods: {
				handelClick() {
					console.log("我是组件方法")
				}
			},
			template: `
			 <div v-on:click="handelClick">count：{{count}}</div>
			`
		});

		const vm = app.mount("#root");
		//输出结果：
		//页面展示：count：2
		//console打印顺序：
		//我是混入生命周期
		//我是组件生命周期
		//触发事件：只会执行：我是组件方法
	</script>
</html>

子组件中如何混入mixin，则父组件中传入通过props接收的值，将不会显示，只会显示mixin中的值

<child v-bind:count="count" />
app.component("child", {
			mixins: [myMixin],
			props:["count"],
			template: `<div>{{count}}</div>`
		})
输出：1，并且控制台报警：Data property "count" is already defined in Props.

app.component("child", {
			mixins: [myMixin],
			template: `<div>{{count}}</div>`
		})
		输出：1

miao_zz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中Mixin混入的基本知识

vue中Mixin混入的基本知识子组件中如何混入mixin，则父组件中传入通过props接收的值，将不会显示，只会显示mixin中的值1.组件中data，methods的优先级高于mixin data，methods的优先级，并且两个一起存在的时候，只会执行组件的data，methods2.生命周期函数：先执行mixin里面的，后执行组件里面的<!DOCTYPE html><html> <head> <meta charset="utf-8">
复制链接

扫一扫