Vue（六）：组件的Prop

2、Prop

　　1)、大小写问题
　　根据官网给的规范大概就是内部命名用驼峰命名，外部调用就使用其等价的 kebab-case (短横线分隔命名) 命名。养成一个好习惯是很有必要的，人家咋说你咋做呗。

　　2）、对传入属性的设置
　　我们可以对传入的属性设置type，官方定义的传入类型有String,Number,Boolean,Array,Object,Date,Function,Symbol。还可以设置默认值、是否必填，甚至还能对传入的属性设置自定义的验证方法

propNum: {
    type: String,  //类型
    required: true,  //是否必填
    default: 100,  //默认数据
    validator:function(value){  //验证方法
        return value<1000;  //如果传进来的数值大于1000，那它将会产生一个控制台的警告
    }
},

　　3）、单向数据流和双向数据流
　　所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
　　但是在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。
　　以上这些话都是从官网上抄的，我也试着自己总结了，确实没人家说得好。我能怎么办，还是举个栗子吧

<base-span :test-str.sync="str1"></base-span>{{str1}}  //这是父级代码

<template>//这是子级代码
  <span>{{testStr}}<button @click="str1='sdfsdfsdff'">change</button></span>
</template>

<script>
export default {
    props:["testStr"],
    data(){
        return{
            str1:"",
        }
    },
    watch:{
        str1:function(newVal){
            this.$emit('update:test-str',newVal)
        }
    },
}
</script>

　　4）、非 Prop 的 Attribute
　　这个啥意思呢，就是太晚了，明天早上改

Vue（六）：组件的Prop

猜你喜欢