组件

一、前言

组件是可复用的 Vue 实例，可以理解为一段可复用的html模板及其数据和方法。

二、组件的注册和使用

<div id = "app">
 <table>
    <tbody>
        <table-row></table-row>
     </tbody>
  </table>
</div>
<script>
// 全局组件的注册
Vue.component('TableRow', {
    data: function(){
        return {
            content: 'this is a row'
        };
    },
    template: '<tr><td>{{ content }}</td></tr>'
});
var app = new Vue({
    el: '#app'
});
</script>

提示：注册组件时，名称可以是TableRow，也可以是table-row的写法，最终都会识别为table-row

生成的dom是：

<tr><td>this is a row</td></tr>
<table><tbody></tbody></table>

可以发现，虽然dom被渲染出来了，但是位置并不正确（tr应该在tbody中），像诸如ul，ol，table等对子元素类型有要求的元素中使用组件，都可能出现这样的问题。
解决方案：

  • 使用is
<tbody>
   <tr is = "table-row"></tr>
</tbody>

这样，dom会被正确渲染

  • 使用template
<tbody>
  <template>
    <table-row></table-row>
  </template>
</tbody>

使用template紧紧包裹组件，dom也会被正确渲染。

值得注意的是：
使用模板来解决，内容来源要是：

三、组件的通信

  1. 父组件向子组件传递参数
<div id = "app">
  <counter v-bind:count="count"></counter>
  <button @click = "add">点击加一</button>
</div>
<script>
Vue.component('counter', {
  props: ['count'], // 表示要接收的参数
  template: '<p>当前计数值为：{{ count }}</p>'
});
var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    add: function(){
      this.count++;
    }
  }
});
</script>

父组件的count通过v-bind传递到子组件的props中的count，这样组件之间数据就进行了绑定。父组件的count改变时，子组件的count随之发生改变。

提示：传递的参数也可以是对象或数组等。

  1. 子组件向父组件传递事件消息
    在vue中，具有单向数据流的概念，就是数据只能从父组件流向子组件，子组件不能改变父组件传递过来的数据。
    如果要改变这些数据的显示，
    要么子组件创建一个副本，通过改变这个副本，来改变数据的显示；
    要么传递事件消息给父组件，让父组件改变数据。
  • 子组件通过创建副本来改变数据
<div id = "app">
    <counter v-bind:count="count"></counter>
</div>
<script>
var counter = {
  props: ['count'], // 表示要接收的参数
  data: function(){
      return {
        number: this.count // 使用props中的count创建副本number
      };
  },
  methods: {
      add: function(){
          this.number++; // 不能使用count++
      }
  },
  template: '<p @click="add">当前计数值为：{{ number }}</p>'
};
var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  // 局部组件组件
  components: {
      counter: counter
  }
});
</script>

上面代码，通过改变count的副本number来改变数据的显示。

  • 子组件通过触发父组件的事件来改变数据
<div id = "app">
    <counter v-bind:count="count" v-on:add-count="add"></counter>
</div>
<script>
var counter = {
  props: ['count'], 
  methods: {
      add: function(){
          this.$emit('add-count'); // 告诉父组件执行add事件
      }
  },
  template: '<p @click="add">当前计数值为：{{ count }}</p>'
};
var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
      add: function(){
          this.count++;
      }
  },
  // 局部组件组件
  components: {
      counter: counter
  }
});
</script>

上面的流程是：

  • 子组件通过发送$emit触发父组件的对应事件

this.$emit(add-count)

  • 父组件通过监听对应事件，捕获到请求就执行
    v-on:add-count

注意：$emit中事件的名称不能是addCount的形式，用add-count代替
补充：$emit可以带参数传递，$emit(event, args0, args1, ...)

四、props

  • 静动态传值
<!-- 静态 -->
<blog-post title="My journey with Vue"></blog-post>
<!-- 动态传值 -->
<blog-post v-bind:title="My journey with Vue"></blog-post>
  • 传值类型
    props可以传递所有类型的值
    特殊的是：
post:{
  id: 'id_1'
  title: 'title_1'
}
<blog-post v-bind="post"></blog-post>
等价于
<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>
  • 验证
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
      }
    }
  }
})
  • 非props特性
    一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。
<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

上面的代码向组件传递data-date-picker特性的值，如果组件没有定义这个prop，那么它就是非props特性。这时，这个特性会被附加到组件的根元素上。

注意：这些根元素如果存在同名冲突，会进行合并或者替换。（class和style会合并）
如果要禁止组件继承这些特性，可以在组件中定义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>
  `
})

上面代码禁止了非props属性附加到组件的根元素上，而是人为使用$attrs决定附加到input上进行动态绑定。

六、组件事件

自定义事件使用 kebab-case 的命名方式命名。

  • 绑定原生事件
<base-input v-on:focus.native="onFocus"></base-input>

如果要实现点击组件触发点击事件，不添加native修饰符无法触发事件。添加了native修饰符，vue把事件添加到组件根元素上。

  • v-model
    一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是如单选框等表单元素可能需要的值是checked而不是value，那么就需要使用model选项说明。
<base-checkbox v-model="lovingVue"></base-checkbox>
<script>
Vue.component('base-checkbox', {
  model: {
    prop: 'checked', //声明使用checked作为v-model的绑定值
    event: 'change' // 声明触发的事件为change，不是input
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
});
</script>
  • $listeners
    这个属性可以获取组件上所有的监听器，可以用来给组件中特定元素添加原生事件。
Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

提示：这里v-on="inputListeners"实际上是v-on直接绑定一个对象，这和v-bind绑定一个对象一样，会将inputListeners中所有的属性（这里属性值为事件）绑定为监听事件。

  • sync修饰符
this.$emit('update:title', newTitle);
<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

子组件修改父组件数据一般通过$emit触发父组件方法，父组件监听这个自定义方法来实现。vue建议将事件命名为update:prop的形式，为此添加了sync的修饰符给父组件使用，用于监听这种形式的事件。

<text-document v-bind:title.sync="doc.title"></text-document>
<text-document v-bind.sync="doc"></text-document>

注意的是，使用sync修饰符时，不能使用js表达式。比如{title: '', content: ''}或者count++等。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,384评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,845评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,148评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,640评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,731评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,712评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,703评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,473评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,915评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,063评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,706评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2赞 352

推荐阅读更多精彩内容