傳入Vue建構器的多數選項也可以用在Vue.extend()中，除了data和el，如果簡單的物件作為選項傳給Vue.extend()，則所有的實例將共享同一個data對象，因此我們應使用一個函數作為data選項，讓這個函數返回一個新對象：
table 只能直接包含thead, tbody, tfoot, tr, caption, col, colgroups 只能直接包含thead, tbody, tfoot, tr, caption, col, colgroup直接包含th 和td
var MyComponent = Vue.extend({
data: function () {
return { a: 1 }
}
}) 登入後複製
Props
使用propsp元傳遞資料
Props
使用 props組件，props是組件資料的一個字段，期望從父組件傳下來，子組件需要顯式地用props選項聲明props：
<tr is="my-component"></tr>
</table>
//<template> 不能用在 <table> 内，这时应使用 <tbody>，<table> 可以有多个 <tbody>
<table>
<tbody v-for="item in items">
<tr>Even row</tr>
<tr>Odd row</tr>
</tbody>
</table> 登入後複製
然後向它傳入一個普通字符串
動態props
用v-bind绑定动态props到父组件的数据，每当父组件的数据变化时，也会传导给子组件：
<div>
<input v-model="parentMsg">
<child v-bind:my-message="parentMsg"></child>
//<child :my-message="parentMsg"></child>
</div> 登入後複製
props绑定类型
prop默认是单向绑定，当父组件的属性变化时，将传导给子组件，但是反过来不会，这是为了防止子组件无意修改了父组件的状态，可以使用.sync或.once绑定修饰符显式地强制双向或单次绑定：
<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>
<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>
<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child> 登入後複製
如果 prop 是一个对象或数组，是按引用传递。在子组件内修改它会影响父组件的状态，不管是使用哪种绑定类型。
父子组件通信
父链
子组件可以用this.$parent访问它的父组件，根实例的后代可以用this.$root访问它，父组件有一个数组this.$children，包含它所有的子元素
自定义事件
Vue实例实现了一个自定义事件接口，用于在组件树中通信，这个事件系统独立于原生DOM事件，用法也不同，每一个Vue实例都是一个事件触发器：
使用 $on() 监听事件；
使用 $emit() 在它上面触发事件；
使用 $dispatch() 派发事件，事件沿着父链冒泡；
使用 $broadcast() 广播事件，事件向下传导给所有的后代。
不同于 DOM 事件，Vue 事件在冒泡过程中第一次触发回调之后自动停止冒泡，除非回调明确返回 true。
<!-- 子组件模板 -->
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父组件模板 -->
<div id="events-example">
<p>Messages: {{ messages | json }}</p>
<child></child>
</div>
// 注册子组件
// 将当前消息派发出去
Vue.component('child', {
template: '#child-template',
data: function () {
return { msg: 'hello' }
},
methods: {
notify: function () {
if (this.msg.trim()) {
this.$dispatch('child-msg', this.msg)
this.msg = ''
}
}
}
})
// 初始化父组件
// 将收到消息时将事件推入一个数组
var parent = new Vue({
el: '#events-example',
data: {
messages: []
},
// 在创建实例时 `events` 选项简单地调用 `$on`
events: {
'child-msg': function (msg) {
// 事件回调内的 `this` 自动绑定到注册它的实例上
this.messages.push(msg)
}
}
}) 登入後複製
效果：
使用v-on绑定自定义事件
在模板中子组件用到的地方声明事件处理器，为此子组件可以用v-on监听自定义事件：
当子组件触发了 "child-msg" 事件，父组件的 handleIt 方法将被调用。所有影响父组件状态的代码放到父组件的 handleIt 方法中；子组件只关注触发事件。
子组件索引
使用v-ref为子组件指定一个索引ID，可以直接访问子组件
<div id="parent">
<user-profile v-ref:profile></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile 登入後複製
使用Slot分发内容
内容分发：混合父组件的内容与子组件自己的模板的方式，使用特殊的元素作为原始内容的插槽。
编译作用域
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。
绑定子组件内的指令到一个组件的根节点：
Vue.component('child-component', {
// 有效，因为是在正确的作用域内
template: '<div v-show="someChildProperty">Child</div>',
data: function () {
return {
someChildProperty: true
}
}
}) 登入後複製
类似地，分发内容是在父组件作用域内编译。
单个slot
父组件的内容将被抛弃，除非子组件模板包含，如果子组件模板只有一个没有特性的slot，父组件的整个内容将插到slot所在的地方并替换它。
标签的内容视为回退内容。回退内容在子组件的作用域内编译，当宿主元素为空并且没有内容供插入时显示这个回退内容。
假定 my-component 组件有下面模板：
<div>
<h1>This is my component!</h1>
<slot> 登入後複製
如果没有分发内容则显示我。
父组件模板：
<my-component>
<p>This is some original content</p>
<p>This is some more original content</p>
</my-component> 登入後複製
渲染结果：
<div>
<h1>This is my component!</h1>
<p>This is some original content</p>
<p>This is some more original content</p>
</div> 登入後複製
具名slot
元素可以用一个特殊特性name配置如何分发内容，多个slot可以有不同的名字，具名slot将匹配内容片段中有对应slot特性的元素。
仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的回退插槽。如果没有默认的 slot，这些找不到匹配的内容片段将被抛弃。
动态组件
多个组件可以使用同一个挂载点，然后动态地在它们之间切换，使用保留的元素，动态地绑定到它的is特性：
new Vue({
el: 'body',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component :is="currentView">
<!-- 组件在 vm.currentview 变化时改变 -->
</component>
keep-alive 登入後複製
把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。
activate钩子
控制组件切换时长，activate 钩子只作用于动态组件切换或静态组件初始化渲染的过程中，不作用于使用实例方法手工插入的过程中。
Vue.component('activate-example', {
activate: function (done) {
var self = this
loadDataAsync(function (data) {
self.someData = data
done()
})
}
}) 登入後複製
transition-mode
transition-mode 特性用于指定两个动态组件之间如何过渡。
在默认情况下，进入与离开平滑地过渡。这个特性可以指定另外两种模式：
in-out：新组件先过渡进入，等它的过渡完成之后当前组件过渡出去。
out-in：当前组件先过渡出去，等它的过渡完成之后新组件过渡进入。
示例：
<!-- 先淡出再淡入 -->
<component
:is="view"
transition="fade"
transition-mode="out-in">
</component>
.fade-transition {
transition: opacity .3s ease;
}
.fade-enter, .fade-leave {
opacity: 0;
} 登入後複製
Vue.js 组件 API 来自三部分——prop，事件和 slot：
prop 允许外部环境传递数据给组件；
事件 允许组件触发外部环境的 action；
slot 允許外部環境插入內容到組件的視圖結構內。
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
