vue第六节

prop 传递数据

组件实例的作用域是孤立的,父组件不能直接使用子组件的数据，子组件也不能直接使用父组件的数据

父组件在模板中使用子组件的时候可以给子组件传递数据

  <bbb money="2"></bbb>

子组件需要通过props属性来接收后才能使用

'bbb':{
    props:['money']

如果父组件传递属性给子组件的时候键名有'-'，子组件接收的时候写成小驼峰的模式

    <bbb clothes-logo='amani' clothes-price="16.58"></bbb>
    ////
    props:['clothesLogo','clothesPrice']

我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件

单向数据流

Prop 是单向绑定的：当父组件的属性变化时，将传递给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

prop验证

我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用

验证主要分为：类型验证、必传验证、默认值设置、自定义验证

props:{
    //类型验证:
    str:String,
    strs:[String,Number],
    //必传验证
    num:{
        type:Number,
        required:true
    },
    //默认数据
    bool:{
        type:Boolean,
        // default:true,
        default:function(){
            return true
        }
    },
    //自定义验证函数
    nums:{
        type:Number,
        validator: function (value) {
            return value %2 == 0
        }
    }
}

当父组件传递数据给子组件的时候，子组件不接收，这个数据就会挂载在子组件的模板的根节点上

扫描二维码关注公众号，回复： 6450890 查看本文章

slot

vue里提供了一种将父组件的内容和子组件的模板整合的方法：内容分发，通过slot插槽来实现

匿名插槽

<aaa>abc</aaa>

template:"<h1><slot></slot></h1>"

在父组件中使用子组件的时候，在子组件标签内部写的内容，在子组件的模板中可以通过<slot></slot>来使用

具名插槽

父组件在子组件标签内写的多个内容我们可以给其设置slot属性来命名，在子组件的模板通过通过使用带有name属性的slot标签来放置对应的slot，当slot不存在的时候，slot标签内写的内容就出现

<my-button>提交</my-button>
<my-button>重置</my-button>
<my-button></my-button>

template:"<button><slot name="btn">按钮</slot></button>"

prop 传递数据

单向数据流

prop验证

slot

猜你喜欢