This chapter includes the components: multiplexing basic use, components, tissue components, assembly prop parameter passing, switching, characteristic IS, slot, event binding, v-model
Basic use:
Component is Vue examples reusable , and has a name
Examples Vue component is multiplexed, and so they are new Vue
receiving the same options , for example data
, computed
, watch
, methods
and lifecycle hooks and the like. The only exception is like el
this root instance-specific options.
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })
Reusable component
Each component has a separate counter
data: it must be a constructor: If the object is written, I run this error
data: function () { return { count: 0 } }
Organizational components
In order to use the template, these components must be registered in order to be able to identify Vue
Register two types of components: a global register (Vue.component) and local register
Component global registration
1: can be used after it has been registered with any (by the new Vue
Vue root instance) newly created,
2: template for all of its component sub-assemblies tree
Transmitting data to the sub-assembly by Prop
Do not pass data to the component, the component does not make sense!
A default component can have any number of prop, any value can be passed to any prop
Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' })
<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>
v-for example
new Vue({ el: '#blog-post-demo', data: { posts: [ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' } ] } })
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" ></blog-post>
A single root element (root element component must have a similar command angularjs)
A post object may be transmitted to the props; v-for key must ha
The following code uses a template string ES6 the concept, you do not want to compile Babel or TypeScript like tools, please use the escape character line change
Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <div v-html="post.content"></div> </div> ` })
Monitor sub-component events
Parent component:
<blog-post ... v-on:enlarge-text="postFontSize += 0.1" ></blog-post>
Subassembly:
<button v-on:click="$emit('enlarge-text')"> Enlarge text </button>
使用事件抛出一个值:$emit第二个参数
子组件
<button v-on:click="$emit('enlarge-text', 0.1)"> Enlarge text </button>
父组件通过:$event监听获取
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>
//父组件是一个事件处理函数
<blog-post ... v-on:enlarge-text="onEnlargeText" ></blog-post>
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}
在组件上使用 v-model
<input v-model="searchText">
等价于
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >
用在组件上会是这个样子
<custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input>
- 将其
value
特性绑定到一个名叫value
的 prop 上 - 在其
input
事件被触发时,将新的值通过自定义的input
事件抛出
写成代码是这样子
Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > ` })
使用时候这个样子
<custom-input v-model="searchText"></custom-input>
通过插槽分发内容
Vue.component('alert-box', { template: ` <div class="demo-alert-box"> <strong>Error!</strong> <slot></slot> </div> ` })
html页面:
<alert-box>
Something bad happened.
</alert-box>
效果:
动态组件(组件切换)
Vue 的 <component>
元素加一个特殊的 is
特性来实现:
其中currentTabComponent可以取值
- 已注册组件的名字,或
- 一个组件的选项对象
<!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bind:is="currentTabComponent"></component>
解析 DOM 模板时的注意事项(is问题)
有些 HTML 元素,诸如 <ul>
、<ol>
、<table>
和 <select>
,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>
、<tr>
和 <option>
,只能出现在其它某些特定的元素内部。
错误的用法
<table> <blog-post-row></blog-post-row> </table>
正确的用法
<table> <tr is="blog-post-row"></tr> </table>
需要注意的是如果我们从以下来源使用模板的话,这条限制是不存在的:
- 字符串 (例如:
template: '...'
) - 单文件组件 (
.vue
) <script type="text/x-template">
下面是单文件组件和template