vue 局部组件的注册 components属性

最新推荐文章于 2024-03-29 02:15:36 发布

天马行空zqzq

最新推荐文章于 2024-03-29 02:15:36 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/qq_42039912/article/details/107258353

版权

注册在全局组件里面，有个属性componets,里面用键值的形式来注册

或者注册在实例里面也行，有个components属性，方法是一样的

键名为组件名，值是一个对象，里面包含的是要渲染的模板

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<my-template></my-template>
	</div>
	<script type="text/x-template" id="my-template">
		<div>
			<h1>{{ message }}</h1>
			<div>嗯嗯</div>
			<!-- 局部组件 -->
			<myData></myData>
		</div>
	</script>
	<script src="node_modules/vue/dist/vue.js"></script>
	<script>
		//全局组件的注册
		Vue.component('my-template', {
			data: function () {
				return {
					message: '哈哈，是的嘛'
				}
			},
			//局部组件的注册，只能在这个 my-template 模板可以使用，其他的不行
			components: {
				myData: {
					template: '<div>压力大</div>'
				}
			},
			template: '#my-template',

		})

		var app = new Vue({
			el: '#app',
			data: {
				message: 'hah'
			}
		})
	</script>
</body>
</html>