Vue入門（2）組件

組件

組件是可複用的 Vue 實例，且帶有一個名字。 組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器爲它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴展。

1.局部組件的創建

<div id="app">
	<Child></Child>		//局部組件的使用
</div>

<script>
	//局部組件的聲明
	var Child = {
		template: '<p>This is a component</p>'
	};
	var vm = new Vue({
		el: '#app',
		components: {	//局部組件的掛載
			//Child : Child
			Child		//簡寫
		}
	});
</script>

2.全局組件的創建

第一個參數爲組件的名字，第二個參數爲options

Vue.component("Vbtn",{
	template : `
		<button>按鈕</button>
	`,
})

組件傳值

1.通過props往子組件傳值

1. 先給父組件中綁定自定義的屬性
2. 在子組件中使用props接收父組件傳遞的數據
3. 在子組件中就可以任意使用了

<script>
Vue.component("Parent",{
	data(){
		return{
			msg : "我是父組件的數據"
		}
	},
	template : `
		<div>
			<p>我是父組件-----{{msg}}</p>
			<Child :childData='msg'/>		//第一步
		</div>
	`,
})

Vue.component("Child",{
	template : `
		<div>
			<p>我是子組件</p>
			<p>我正在使用父組件的數據 －－－ {{childData}}</p>	//第三步
		</div>
	`,
	props : ["childData"]			//第二步
})

new Vue({
	el: '#app',
	data: function(){
		return {

		}
	},
	template : `
		<Parent />
	`
})
</script>

2.通過事件往父組件傳值

1. 在父組件綁定自定義事件
2. 在子組件中觸發原生的事件，在函數中使用$emit觸發自定義的事件

<script>
	Vue.component("Parent",{
		data(){
			return{
				msg : "我是父組件的數據"
			}
		},
		template : `
			<div>
				<p>我是父組件</p>
				<Child :childData='msg' @childHandler='childHandler'/>	//第一步
			</div>
		`,
        methods : {
            childHandler(val){
                console.log(val);
            }
        }
	})

	Vue.component("Child",{
		template : `
			<div>
				<p>我是子組件</p>
				<input type="text" v-model="childData" @input='changeValue(childData)'/>	//第二步
			</div>
		`,
		props : ["childData"],
        methods : {
            changeValue(val){
                //$emit方法第一個參數爲自定義事件名，第二個參數爲傳遞的消息
                this.$emit('childHandler',val)
            }
        }
	})

	new Vue({
		el: '#app',
		data: function(){
			return {

			}
		},
		template : `
			<Parent />
		`
	})
</script>