vuex 简介

prop 是什么

prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。

如何使用 prop

  1. 在组件内部,使用 props 选项来定义好,当前组件需要用到的参数
  2. 调用组件的时候,在组件的标签上面,通过自定义属性来传递 prop
    new Vue({
      el: '#app',
      components: {
        helloWorld: {
          props: ['title'],
          data: function() {
            return {
              msg: '张三'
            }
          },
          template: `
            <div>{{ msg }}</div>
          `
        }
      }
    })

<div id="app">
  <hello-world title="我的天呀"></hello-world>
</div>

props 的定义有几种

两种

  1. 数组的方式
props: ['title', 'xxx']

  1. 对象的方式 (这种方式能够实现 prop 的验证)
props: {
  title: String,
  // 对象或数组默认值必须必须传递一个函数,然后返回默认值
  xxx: {
    type: Object,
    default: function() {
      return { message: 'hello' }
    }
  },
  // 自定义验证函数
  yyy: {
    validator: function(value) {
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }
}

非 Prop 的特性

如果使用组件时,传递的某个属性,在组件中没有定义这个属性的prop的话,那么这个属性就是一个 非 prop 的特性非 prop 的特性 会自定添加到组件的 根元素 上面。

替换/合并已有的特性

默认情况下,非 prop 的特性 会直接替换 组件的 根元素 上面的相同名字的属性。(如下代码,最终渲染在浏览器中的 hello 组件的根元素的id值将会是 hhh)。但如果是 class 或者style 的话将会对两边的值做一个合并

Vue.component('hello', {
  template: `
    <div id="box">我的天呀</div>
  `
})

<div id="app">
  <hello id="hhh"></hello>
</div>

禁用特性继承

如果不希望组件的根元素继承特性,你可以设置组件的 inheritAttrs 选项为 false

Vue.component('hello', {
  inheritAttrs: false
})

$attrs 与 禁用特性继承 来实现 基础组件
Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

<base-input
  v-model="username"
  class="username-input"
  placeholder="Enter your username"
></base-input>

PS:

  1. prop 是不能主动修改的
  2. prop 定义时如果是 驼峰 命令方式,那么使用的时候需要为 短横线 方式,与组件一样在3种特殊情况下,不需要。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 开发一个React应用,更多的是在编写组件,而React组件最小的单位就是React元素,编写组件的最大的好...
    itclanCoder阅读 1,186评论 0 1
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,536评论 0 13
  • 组件注册 组件名 在注册一个组件的时候,我们始终需要给它一个名字。 该组件名就是Vue.component的第一个...
    oWSQo阅读 412评论 0 1
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,535评论 1 33
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 3,870评论 5 14