八组件-prop

1、驼峰与横断线分隔命名

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

当props中的属性postTitle用到dom的自定义属性中时，这里就需要转换成横短线分隔 post-title，如果用在字符串模板中则不需要。如下

<div id="app">
  <div>
    <my-title v-for="post in posts" :key="post.key" :my-title="post.myTitle"></my-title>
  </div>
</div>
<script>
Vue.component('my-title',{
  props:['myTitle'],
  template:'<div ><h3>{{myTitle}}</h3>'
}
);
var vm = new Vue({
  el:'#app',
  data:{
    posts:[
    {key:1,myTitle:'t1'},
	{key:2,myTitle:'t2'},
	{key:3,myTitle:'t3'}],
	postFontSize :1
  }
});
</script>

2、类型约束

props中定义时可以定义数据类型，格式如下

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

3、直接绑定对象

<my-title v-for="post in posts" :key="post.key" v-bind="post"></my-title>

v-bind="post"等价于:my-title=myTitle

4、prop验证

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

Vue.component('my-component', {
  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
      }
    }
  }
})

5、属性合并

假设你定义了一个组件<my-title>他内部是一个带有样式的h1，而外部定义的my-title也有样式，这样两个样式只会叠加，不会替换

6、禁用属性继承特性

如果你不希望组件的根元素继承特性，你可以设置在组件的选项中设置 inheritAttrs: false。

八 组件-prop

猜你喜欢