10、组件component

组件复用

<div id="app">
			<!--组件复用-->
			<div>
				<button-counter></button-counter>
				<button-counter></button-counter>
			</div>
		</div>
		<script>
			var data = {
				
			};
			
			<!--data必须是一个函数-->
			Vue.component('button-counter', {
				data:function() {
					return {
						counter:0
					}
				},
				template:'<button v-on:click="counter += 1">counter:{{counter}}</button>'
			});
			
			var vue = new Vue({
				el:"#app",
				data:data
			});
		</script>

传值到子组件

<div id="app">
			<!--值传入子组件-->
			<div>
				<blog-post v-bind:title="'this is title'"></blog-post>
			</div>
		</div>
		<script>
			var data = {
				
			};
			
			<!--data必须是一个函数-->
			Vue.component('button-counter', {
				data:function() {
					return {
						counter:0
					}
				},
				template:'<button v-on:click="counter += 1">counter:{{counter}}</button>'
			});
			
			Vue.component('blog-post', {
				template:'<h3>{{title}}</h3>',
				props:['title']
			});
			
			var vue = new Vue({
				el:"#app",
				data:data
			});
		</script>

使用$.emit,让子组件触发父组件事件

$emit(‘父组件的事件名称’, args)

<div id="app">
			<!--使用$.emit,让子组件触发父组件事件-->
			<div>
				<blog-post2 v-on:parent="show"></blog-post2>
			</div>
		</div>
		<script>
			var data = {
				
			};
			Vue.component('blog-post2', {
				template:'<div><button v-on:click="$emit(\'parent\', \'abc\')">show</button></div>'
			});
			
			var vue = new Vue({
				el:"#app",
				data:data,
				methods:{
					show:function(val) {
						console.log(val);
					}
				}
			});
		</script>

通过插槽分发内容

<div id="app">
			<!-- 通过插槽<slot>分发内容 -->
			<div>
				<blog-post3>通过插槽<slot>分发内容</blog-post3>
			</div>
		</div>
		<script>
			var data = {
				
			};
			Vue.component('blog-post3', {
				template:'<div><slot></slot></div>'
			});
			
			var vue = new Vue({
				el:"#app",
				data:data
			});
		</script>