slot的基本使用
1.什么是 插槽(有三种)
插槽就是父组件往子组件中插入一些内容
默认插槽
- 默认插槽就是把父组件中的数据,显示到子组件中,子组件通过一个slot插槽标签显示父组件中的数据
- 具名插槽就是在父组件中通过slot属性,给插槽命名,在子组件中通过slot标签,根据定义好的名字填充到对应的位置
- 作用域插槽:他是带有数据的插槽,子组件提供给父组件的参数,父组件根据子组件传过来的插槽来进行不同的展现和填充内容,在标签中通过slot-scope来接收数据
插槽的总结
- v-slot的出现是为了代替原有的slot和slot-scope
- 简化了一些复杂的语法
- 一句话概括就是v-slot:后边是插槽的名称,后边是组件内部绑定的作用域值得映射
prop的大小写
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- 父组件中 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
2.单项数据流
- 所有的prop都使其父子prop之间想成了一个单向下行绑定,父级的prop的更新会向下流动到子组件中,但是反过来则不行
- 每次父级组件发生更新的时候,子组件中所有的prop都将会刷新为最新的值,这就意味着你不应该在子组件内部改变prop
<!-- 测试单向数据流 -->
父组件
<h1>{{msg}}</h1>
<test-single-data-flow :msg="msg"></test-single-data-flow>
子组件 通过prop接受父组件msg
Vue.component('test-single-data-flow', {
props: ['msg'],
data() {
return {
}
},
// 子组件 不可以修改prop中的值
template: `<span><input type="text" v-model="msg"/></span>`
})
var app = new Vue({
el: "#app",
data: {
msg: 'Single_Data_Flow'
}
})
* 单项数据流不允许修改
* 在组件中修改prop传递过来的数据vue会发出警告,所以有两种常见的用法去修改prop传递过来的值
- 本地data中定义属性,并将prop作为初始值
data() {
return {
msg_data: this.msg
}
}
- 使用computed将prop的值进行处理
prop验证
<test-prop-validate :prop-a="1" :prop-b="2" :prop-c="'3'" :prop-f="'success'"></test-prop-validate>
Vue.component('test-prop-validate', {
props: {
// 基础的类型检查 (`null` 匹配任何类型)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
},
data() {
return {
}
},
template: `
<div>
{{propD}}{{propE}}
</div>
`
})
* type可以是下列原生构造函数中的一个:
* string Number boolean Array Object Data Function Symbol
- 非prop特性
- 非prop特性,会被组件可以接受任意的特性,而这些特性