什么是组件？ 它是一个功能高内聚，业务低耦合的一个功能代码片段(功能组件)。
作用：业务、逻辑解耦(让业务与业务之间不要紧密关联，可以提高代码的重用性)
出现原因：因为在业务开发中会有很多的代码以及功能模块会相似，但是又有一定的区别，所以需要对代码进行一个解耦开发，那么这些解耦出来的代码，可以认为是一个组件，所以vue的一个页面，可以由很多个组件进行组成
进行vue开发，需要在vscode中进行一个插件安装：Vetur、Vue 3 Snippets
组成：
template:用于快速编写html结构，只能有一个顶层元素。
script:用于编写Vueconstructor参数对象，实现方法和数据定义、组件注册等。
style:编写css样式。
【面试题】如果是template和render方法同时存在，会认template，那么原理是什么？
因为.vue文件在执行时会被vue-loader(是vue专门编写的一个用于编译vue文件的一个webpack库)编译成一个js代码，template会被编译成一个render方法，使用createElement方法来进行虚拟dom的创建，又因为同时存在render和template， 那么加载的时候是先加载render，然后再加载template，所以render方法就会被覆盖。
组件之间的通信
- 父传子 ---->使用prop(标签属性)原理
总结： 父组件在子组件标签上绑定任意的数据，然后子组件通过props来定义需要接收的数据类型和默认值，是否必传属性
例如：父组件内index.vue
...
<Child :amount="amount"/>
...
<script>
import Child from './Child.ve'
export default{
components:{
Child
},
data(){
return {
amount:1000
}
}
}
</script>
//这里是传递一个Number类型的数据
子组件内Child.vue
...
<div>
<h2>
{{amount}}
</h2>
</div>
...
<script>
export default{
props:{
// 要定义数据类型
amount:{
type:Number,
//定义这个属性必传
required:true
}
}
}
</script>
- 子传父----->使用$emit(事件触发机制)原理
总结： 父组件在子组件标签上绑定一个自定义事件，然后绑定事件回调方法，子组件在适当的时机调用$emit方法去触发自定义事件，然后进行值传递
语法：$emit(event: string, ...args: any[])
该方法第一个参数固定为事件名字，从第二个参数开始都为传递的数据。
子组件内 list.vue
...
<button @click="itemEvt(item)">
增加
</button>
...
<sript>
export default{
methods:{
itemEvt(item){
this.$emit('itemClick',item)
}
}
}
</sript>
父组件内 index.vue
...
<ListNode @itemClick="parentClickEvt"/>
...
<script>
import ListNode from './list.vue'
export default{
components:{
ListNode
},
methods:{
parentClickEvt(item){
console.log(item)
}
}
}
</script>
动态组件【面试题】
常用于在页面上，根据不同的条件展示不同的组件
要切换数据->按钮、下拉框
要做到组件切换。
本质还是根据数据进行渲染。
<!-- vue应该提供一个全局组件，可以实现给一个组件的名字，它根据名字来进行组件渲染这样的功能 -->
<!-- component全局组件，会根据is属性传递的组件名字，来动态渲染组件 -->
