[JavaScript知识库]vue学习-07-组件01

组件component
也是options中的一个，就像是自定义的一个标签

<script>
		const cpn2 = Vue.extend({
			template: `
		<div>
			<h2>我是子组件</h2>
			<p>我是内容</p>
		</div>
		`
		})
		const cpn1 = Vue.extend({
			template: `
			<div>
				<h2>我是父组件</h2>
				<p>我是内容</p>
				<cpn2></cpn2>
			</div>
			`,
			/* 在父组件中声明子组件 */
			components: {
				'cpn2': cpn2
			}
		})

		/* 全局注册  在所有vue实例中都能使用*/
		Vue.component('cpn', cpn1)


		/* 局部注册，只能在当前vue实例中使用 */
		var app = new Vue({
			el: '#app',
			components: {
				'cpn2': cpn2
			}
		});
	</script>

模板分离的写法

<template id="cpn">
		<div>
			<h2>我是子组件</h2>
			<p>我是内容</p>
		</div>
	</template>
const cpn2 = Vue.extend({
			template: '#cpn'
		})

全局注册和局部注册
全局注册：在所有的vue实例中都能使用

/* 全局注册  在所有vue实例中都能使用*/
		Vue.component('cpn', cpn1)

局部注册只能在当前实例中使用

/* 局部注册，只能在当前vue实例中使用 */
		var app = new Vue({
			el: '#app',
			components: {
				'cpn2': cpn2
			}
		});