1.自动化的全局注册和模块系统中的局部注册
见vue的中文文档
2.prop验证:
function Custom () {}
Vue.component('my-component', {
props: {
A: {
type: Custom, // 基础的类型检查,也可以是自定义的构造函数,通过 instanceof 进行检查确认
required: true, // 是否必填
default: '字符串' // 默认值,对象或数组必须通过函数return返回默认值
},
// 简写
B: Number,
C: [String, Number], // 判断多个可能的类型
// 自定义验证函数
D: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
注意:
1.三个属性值:type,requried,default
2.type可以是多个,放在[ ]内,并且type的值不仅可以是原生的构造函数,并且可以是自定义的构造函数,它会通过instanceof来判断是不是通过自定义类型构造的。
3.其中如果类型是对象或者数组的话,default必须是一个函数,并且返回一个相应的对象或是数组
4.使用validate函数,有一个参数value代表属性的值,可以限定属性的值在一个区间内选择
3.非prop的Attribute
一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 prop 定义的 attribute。
因为显式定义的 prop 适用于向一个子组件传入信息,然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的 attribute,而这些 attribute 会被添加到这个组件的根元素上。
3.1替换合并已有的attribute
对于绝大多数 attribute 来说,从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type=“text” 就会替换掉 type=“date” 并把它破坏!庆幸的是,class 和 style attribute 会稍微智能一些,即两边的值会被合并起来,从而得到最终的值:form-control date-picker-theme-dark。
3.2 禁用attribute继承
如果你不希望组件的根元素继承 attribute,你可以在组件的选项中设置 inheritAttrs: false
这尤其适合配合实例的 $attrs property 使用
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>
注意:inheritAttr并不影响class还有style的继承。
4.自定义组件的v-model
v-model默认绑定的是text的属性值和input的事件,
可以通过在子组件中使用model来改变默认的设置
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
<base-checkbox v-model="lovingVue"></base-checkbox>
这里绑定的是checked属性,lovingVue的值会传递给checked,并且当子组件调用change方法的时候,change方法携带一个参数,参数会改变lovingVue的值
5.原生事件绑定到组件
在子组件中可以通过$listeners来获取父组件中绑定的方法
<div id="app">
A{{msg}}
<my-button :msg="msg" @todo="handleClick"></my-button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '100'
},
methods: {
handleClick () {
console.log('点击事件')
}
},
components: {
'MyButton': {
template: `<div @click="$listeners.todo">B</div>`,
created() {
console.log(this.$listeners) // 包含父级所有绑定的方法
}
},
}
})
</script>
通过.sync实现父子组件之间的双向绑定
1.一般情况下,想要实现父子组件间值的传递,通常使用的是 props 和自定义事件 $emit 。
其中,父组件通过 props 将值传给子组件,子组件再通过 $emit 将值传给父组件,父组件通过事件j监听获取子组件传过来的值。
如果想要简化这里的代码,可以使用.sync修饰符,实际上就是一个语法糖。
2.例子:
father.vue
<template>
<div class="app">
{{dataApp}}
<hr>
<Child :money.sync="dataApp"/>
// <Child :money="dataApp" v-on:update:money="dataApp = $event"/> //两句作用等同
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { dataApp: 10000 };
},
components: { Child }
};
</script>
children.vue
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money-100)">
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>