[JavaScript知识库]VUE中的组件

组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率

组件命名

短横线：<my-component >
驼峰式：<MyComponent> 注：如果是驼峰式，在引用时必须将其展开:my-component

基本用法：

全局注册 [父、根组件]

<div id="app">
<my-component></my-component> 
</div>
Vue.component('my-component ', {
template:{`<div>
 <h1>……</h1>
 <p>……</p>
 <span>……</span>
 …
</div>`
}
})
let vm = new Vue({
el:"#app",
});

驼峰式

<div id="app">
<my-component></my-component> 
</div>
Vue.component('myComponent ', { //驼峰式，在引用时必须将其展开
template:{`<div>
 <h1>……</h1>
 <p>……</p>
 <span>……</span>
 …
</div>`
}
})
let vm = new Vue({
el:"#app",
})

局部组件

<div id="example">
	<parent></parent>
</div>
var childNode = {	//局部组件
	template:'<div>{{message}}</div>',
	props:{
		message:Number,
	},
}
let vm = new Vue({
	el:"#example",
	components:{
		parent:parentNode
	}
})

父子组件传值

在 Vue 中，父子组件的关系可以总结为 props 向下传递，事件向上传递。父组件通过 props 给子组件下
发数据，子组件通过事件给父组件发送消息

子组件通过v-bind绑定来接收父组件的值

<div id="app">
	<input type="text" v-model="text">
	<my-component :msg="text"><my-component>
</div>
<script>
	Vue.component('myComponent',{	//全局组件
		props:["msg"],
		template:`<div>{{msg}}</div>`
	})
	let vm = new Vue({
		el:"#app",
		data:{
			text:"",
		}
	})
</script>

子组件监听父组件
通过$emit将实际事件click转换为虚拟事件

<div id="app">
	<button @click="say()">vue根按钮</button>
	<son @aaa="say()"></son>
</div>
<script>
	var son = {
		template:`<button @click="send()">
					组件按钮
				 </button>`,
		methods:{
			 send(){
				 this.$emit('aaa');	//将实际事件click转换为虚拟事件：aaa
			 }
		}
	}
	let vm = new Vue({
		el:"#app",
		components:{
			son
		},
		methods:{
			say(){
				console.log("监听成功设置")
			}
		}
	})
</script>