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操作,使组件变得更加灵活。