Components Basic
文章目录

VueJS - Components

最简例子

1
2
3
4
5
<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  // 定义一个名为 button-counter 的新组件
  Vue.component('button-counter', {
    data: function ({
      return {
        count: 1
      }
    },
    methods: {
      add: function (event{
        this.count = this.count + 2;
      },
    },
    template: '<button v-on:click="add()">You clicked me {{ count }} times.</button>'
  });

然后直接绑定 DOM

1
  new Vue({ el'#components-demo' });

一个组件只能有一个根元素

1
2
3
4
<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

组件一定要注册后才能使用

废话

基本都是全局注册:

1
2
3
Vue.component('my-component-name', {
  // ... options ...
})

data 必须是一个函数

和普通的绑定不一样

这里是普通的绑定:

1
2
3
data: {
  count: 0
}

取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:

1
2
3
4
5
data: function () {
  return {
    count: 0
  }
}

如果不返回一个函数的话, 那么所有 components 会同时更新所有的 data, 各自的 attribute 不会独立

通过 props 向子组件传递值

和 React 很像啊~

1
2
3
4
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

然后给各个 props 赋值就行了

1
2
3
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

Deep in Vue Components

组件注册 Registration

1
Vue.component('my-component-name', { /* ... */ })

第1个参数就是对应的组件名字, 建议使用 kebab-case 或者 pascalCase, 不建议使用 camelCase

1
2
my-component-name
MyComponentName

<my-component-name><MyComponentName> 都是可接受的。

注意两种模式下的大小写分别.

全局注册 Global Registration

1
2
3
Vue.component('my-component-name', {
  // ... 选项 ...
})

这样子写就是默认的全局注册

局部注册 Local Registration

1
2
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
1
2
3
4
5
6
7
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA, //用在这里
    'component-b': ComponentB
  }
})

对于 components 对象中的每个属性来说,其属性名就是自定义元素的名字,其属性值就是这个组件的选项对象。

注意局部注册的组件在其子组件中不可用。例如,如果你希望 ComponentAComponentB 中可用,则你需要这样写:

1
2
3
4
5
6
7
8
var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

引用三方组件

其实也很简单:

1
2
3
4
5
6
7
8
9
import&nbsp;Aplayer&nbsp;from&nbsp;"vue-aplayer";

export&nbsp;default&nbsp;{
&nbsp;&nbsp;created()&nbsp;{
&nbsp;&nbsp;},
&nbsp;&nbsp;components:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;'player':&nbsp;Aplayer
&nbsp;&nbsp;}
};

注意上方将三方组件 Aplayer 注册成了 player

然后在这个组件里面的模板中使用 player 即可

1
<player autoplay :music="..."/>

模板系统 Components

局部注册 Components Registration

就是很简单的那种 import/export

1
2
3
4
5
6
7
8
9
10
11
12
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

//接下来这两个组件都可以使用了

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

这是必然的,你要是不注册你怎么用啊?

Props

大小写问题 Prop Casing (camelCase vs kebab-case)

HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:

1
2
3
4
5
Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
1
2
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

next: https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E9%80%92%E9%9D%99%E6%80%81%E6%88%96%E5%8A%A8%E6%80%81-Prop