Vue基础(组件)

Posted Vivianluolita

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue基础(组件)相关的知识,希望对你有一定的参考价值。

什么是组件?
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 html 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

使用组件
(1)全局注册
我们已经知道,可以通过以下方式创建一个 Vue 实例:

new Vue(
  el: '#some-element',
  // 选项
)

要注册一个全局组件,可以使用 Vue.component(tagName, options)。例如:

Vue.component('my-component', 
  // 选项
)
组件在注册之后,便可以作为自定义元素 <my-component></my-component> 在一个实例的模板中使用。注意确保在初始化根实例之前注册组件:
<div id="example">
  <my-component></my-component>
</div>

实例:

<div id="example">
  <my-component></my-component>
</div>
// 注册
Vue.component('my-component', 
  template: '<div>A custom component!</div>'
)

// 创建根实例
new Vue(
  el: '#example'
)

渲染为:

<div id="example">
  <div>A custom component!</div>
</div>

(2)局部注册
你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件:

var Child = 
  template: '<div>A custom component!</div>'


new Vue(
  // ...
  components: 
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  
)

这种封装也适用于其它可注册的 Vue 功能,比如指令。

(3)DOM 模板解析注意事项

当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意,像

    1. 、、 这样的元素里允许包含的元素有限制,而另一些像 这样的元素只能出现在某些特定元素的内部。

在自定义组件中使用这些受限制的元素时会导致一些问题,例如:

<table>
  <my-row>...</my-row>
</table>

自定义组件 会被当作无效的内容,因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性:

<table>
  <tr is="my-row"></tr>
</table>

应当注意,如果使用来自以下来源之一的字符串模板,则没有这些限制:

Vue.component('my-component', 
  template: '<span> message </span>',
  data: 
    message: 'hello'
  
)

那么 Vue 会停止运行,并在控制台发出警告,告诉你在组件实例中 data 必须是一个函数。但理解这种规则为何存在也是很有益处的,所以让我们先作个弊:

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>
var data =  counter: 0 

Vue.component('simple-counter', 
  template: '<button v-on:click="counter += 1"> counter </button>',
  // 技术上 data 的确是一个函数了,因此 Vue 不会警告,
  // 但是我们却给每个组件实例返回了同一个对象的引用
  data: function () 
    return data
  
)

new Vue(
  el: '#example-2'
)


由于这三个组件实例共享了同一个 data 对象,因此递增一个 counter 会影响所有组件!这就错了。我们可以通过为每个组件返回全新的数据对象来修复这个问题:

data: function () 
  return 
    counter: 0
  

现在每个 counter 都有它自己内部的状态了

Prop
(1)使用 Prop 传递数据
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

子组件要显式地用 props 选项声明它预期的数据:

Vue.component('child', 
  // 声明 props
  props: ['message'],
  // 就像 data 一样,prop 也可以在模板中使用
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '<span> message </span>'
)

然后我们可以这样向它传入一个普通字符串:

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

结果:

(2)camelCase vs. kebab-case

HTML 特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名):

Vue.component('child', 
  // 在 javascript 中使用 camelCase
  props: ['myMessage'],
  template: '<span> myMessage </span>'
)
<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"></child>

(3)动态 Prop
与绑定到任何普通的 HTML 特性相类似,我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时,该变化也会传导给子组件:

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

你也可以使用 v-bind 的缩写语法:

<child :my-message="parentMsg"></child>

如果你想把一个对象的所有属性作为 prop 进行传递,可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如,已知一个 todo 对象:

todo: 
  text: 'Learn Vue',
  isComplete: false

然后:

<todo-item v-bind="todo"></todo-item>

将等价于:

以上是关于Vue基础(组件)的主要内容,如果未能解决你的问题,请参考以下文章

vue中的组件化开发

Vue详解Vue组件系统 目录

Vue父子组件通信之$emit(基于vue2.5,ES6)

Vue.js prop

Vue——自定义组件 & 自定义事件$emit & 插槽slot

Vue.js——6.创建组件