Vue组件-注册私有组件和父子组件

私有组件

注册组件的方法中注册的是全局组件,这样就意味着可以在任意的Vue实例中使用组件。

    <div id="app">
		<my-component></my-component>
		<!--这个是comp可以用的 这个是app对象里的私有方法-->
		<comp></comp>
	</div>
	
	<div id="app2">
		<my-component></my-component>
		<!--这个掉用不到comp,这个是在app对象里的 没有在app2里-->
		<comp></comp>
	</div>
	
	<script type="text/javascript">
		Vue.component("myComponent",{
			template:"<h1>我是一个公共的组件</h1>"
		})
		let comp=Vue.extend({
			template:"<h1>我是一个私有组件</h1>"
		})
		
		var app=new Vue({
			el:"#app",
			components:{
				comp  
			}
		})
		var app2=new Vue({
			el:"#app2",
		})
	</script>

父子组件

组件与组件之间存在层级关系,这也就是父子组件。组件中也有components关键字,同时使用components将子组件注册到父组件中。

    <div id="app">
		<parent></parent>
	</div>
	
	
	<script type="text/javascript">
		let child=Vue.extend({
			template:`
			<div>
				<h2>我是子组件</h2>
			</div>`
		})
		let parent=Vue.extend({
			template:`
			<div>
				<h1>我是父组件</h1>
				<child><child>
			</div>`,
			components:{
				child
			}
		})
		var app=new Vue({
			el:"#app",
			components:{
				parent
			}
		})
		
	</script>