vue中的slot以及vue的prop

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特性，会被组件可以接受任意的特性，而这些特性