Vue:组件的Prop

Posted liangshibo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的主要内容,如果未能解决你的问题,请参考以下文章

在打字稿中的基于 Vue 类的组件中键入 prop

vue调用组件,组件回调给data中的数组赋值,报错Invalid prop type check failed for prop value. Expecte

vue组件,prop声明并传递,但是console说prop丢失

对vue的props实现双向数据流

Vue 组件 - 如何避免改变一个 prop(Laravel 组件)

Vue.js 父子组件,为啥我的 prop 在子组件中还没有?