学习笔记Vue.js组件

Posted 2020-08-23

一、组件的注册

组件的注册分为全局注册和局部注册

全局注册

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

局部注册

 1 var Child = {
 2   template: ‘<div>A custom component!</div>‘
 3 }
 4 new Vue({
 5   // ...
 6   components: {
 7     // <my-component> 将只在父模板可用
 8     ‘my-component‘: Child
 9   }
10 })

 

二、使用Props传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

在组件中需要显式的用props选项来声明：

1 Vue.component(‘child‘, {
2   // 声明 props
3   props: [‘message‘],
4   // 就像 data 一样，prop 可以用在模板内
5   // 同样也可以在 vm 实例中像 “this.message” 这样使用
6   template: ‘<span>{{ message }}</span>‘
7 })

在html传入普通字符串中：

1 <child message="hello!"></child>

也可以动态地绑定props,使用 v-bind 动态绑定表单值，HTML如下:

1 <div>
2   <input v-model="parentMsg">
3   <br>
4   <child v-bind:my-message="parentMsg"></child>
5 </div>

 

三、传递数据

 

• 使用  $on(eventName)  监听事件

• 使用  $emit(eventName)  触发事件

父组件可以在使用子组件的地方直接用  v-on  来监听子组件触发的事件。

下面是一个例子：

//HTML
<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>


//Js
Vue.component(‘button-counter‘, {
  template: ‘<button v-on:click="increment">{{ counter }}</button>‘,
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit(‘increment‘)
    }
  },
})
new Vue({
  el: ‘#counter-event-example‘,
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

 

四、使用slot分发内容

除非子组件模板包含至少一个  <slot>  插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。

最初在  <slot>  标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

假定 my-component 组件有下面模板：

<div>
  <h2>I‘m the child title</h2>
  <slot>
    如果没有分发内容则显示我。
  </slot>
</div>

父组件模版：

<div>
  <h1>I‘m the parent title</h1>
  <my-component>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </my-component>
</div>

渲染结果：

<div>
  <h1>I‘m the parent title</h1>
  <div>
    <h2>I‘m the child title</h2>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </div>
</div>

 

五、可复用组件

在编写组件时，记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。

Vue 组件的 API 来自三部分 - props, events 和 slots ：

• Props 允许外部环境传递数据给组件

• Events 允许组件触发外部环境的副作用

• Slots 允许外部环境将额外的内容组合在组件中。

1 <my-component
2   :foo="baz"
3   :bar="qux"
4   @event-a="doThis"
5   @event-b="doThat"
6 >
7   <img slot="icon" src="...">
8   <p slot="main-text">Hello!</p>
9 </my-component>

 

六、子组件索引

尽管有 props 和 events ，但是有时仍然需要在 javascript 中直接访问子组件。为此可以使用  ref  为子组件指定一个索引 ID 。例如：

1 <div id="parent">
2   <user-profile ref="profile"></user-profile>
3 </div>

1 var parent = new Vue({ el: ‘#parent‘ })
2 // 访问子组件
3 var child = parent.$refs.profile