1，组件名称与Prop命名有规则限制
2，组件里的子组件，有且只能有一个父级DOM包裹，new一个Vue实例时最好使用id作为el的参数（el后的参数要保持唯一性）
3，声明一个组件时，inheritAttrs: false属性是阻止父组件的属性传给子组件（未用到的）
<base-input v-model="username" placeholder="Enter your username"> </base-input> //父组件
子组件为Vue.component（template:`<input >`）对应template声明的dom。
$attrs属性，将子组件未用到的父组件的属性传到制定的子组件（子组件未用到的父组件的属性），
下面示例中的 v-bind="$attrs" //就是将父组件中placeholder="Enter your username"属性传给input
Vue.component('base-input', {
inheritAttrs:false,//阻止父组件中的属性值传到子组件
props: ['label','value'],
template:`
{{ label }}
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
4,v-model的双向数据绑定，用在组件上时modal属性添加prop（对应v-model绑定的值）和event属性（原生DOM所有的事件change,input,focus等等），对于prop对应的数据，要在组件的props属性中声明
Vue.component('base-checkbox', {
model: {
prop:'checked',
event:'change'
},
props: {
checked:Boolean
},
template:`
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
prop对应的数据对应的类型有：
String， Number， Boolean， Array， Object， Date， Function ，Symbol
5,is的使用场景：
（1）：在<component>标签内部使用，
<component v-bind:is = "currentTabComponent"></component>只要改变currentTabComponent的值就能实现不同组件的切换，详情看这里。
currentTabComponent:可以为组件名或一个组件的选项对象。
（2）：类似 table，ul，ol，select等对内部元素有限制的，如果组件内部元素是父级组件所限制的，那么解析时就会异常。
类似：<table>
<input-group></input-group>//被作为无效的内容，提升到外部
</table>
使用 is 解决此问题
<table>
<tr is = "input-group"> </tr>
</table>
6，插槽slot
<slot>标签通过name属性来区分彼此，父组件通过设置 slot=“name”来对应值应该放到哪里，
在父组件中：<template slot = "onecomp"><div>one</div></template>或者<div slot = "onecomp"></div> //可以使用template标签也可以直接在普通元素上添加slot属性。
子组件中：<slot name = "onecomp"></slot>// 上面slot="onecomp" 内部的元素就会替代<slot>标签
slot-scope能将slot上绑定的数据传到父级组件：
<todo-list v-bind:todos = "todos">
<template slot-scope = "slotProps">//slot-scope 对应的是slot标签绑定的数据,拿到传出的数据，就可以将数据添加到对应的dom上
<span v-if:"slotProps.keyValue.isComplate">√</span>
<button v-bind:click="btChange"> {{slotProps.keyValue.text}} </button>
{{slotProps}}
</template>
</todo-list>
子组件内：
Vue.component("todo-list",{
props:["todos"],
template:`
<ul> <li v-for=" todo in todos" v-bind:key="todo.id">
<slot v-bind:keyValue = "todo"></slot>
</li></ul>
`})
new Vue({
el:"todolist",
data:{
todos:[{"id":1,"text":"first","isComplete":true},{"id":2,"text":"two","isComplete":true }]
}
})
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
个人认为，将插槽的数据传到父组件，建立了子组件与父组件的联系，更加方便进行数据以及dom操作，使组件变得更加灵活。
网友评论