具体见:这里
将对象的所有属性作为 prop 进行传递
如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：
todo: {
text: 'Learn Vue',
isComplete: false}登入後複製
然后:
<todo-item v-bind="todo"></todo-item>
登入後複製
将等价于：
<todo-item
v-bind:text="todo.text"
v-bind:is-complete="todo.isComplete"></todo-item>
登入後複製
具体见： 这里
非 Prop 特性的替换与合并
具体见: 这里
Props的一般绑定和动态绑定
我们常用的一般是动态绑定:
// 父组件<child :my-message="parentMsg"></child>new Vue({ data () { return {
parentMsg: '来自父组件的数据'
}
}
})// 子组件Vue.component('child', { // 在 JavaScript 中使用 camelCase
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'})登入後複製
显示:
<span>来自父组件的数据</span>
登入後複製
一般绑定:
// 父组件<!-- 在 HTML 中使用 kebab-case --><child my-message="hello!"></child>
子组件获得的是: 字符串 'hello!'
登入後複製
具体见:这里
.sync 修饰符(2.3.0+新增)
之前在 2.0 版本中移除后，在 2.3.0 中又加上了，只是调用的逻辑发生了变化，变成了一种语法糖。
如下代码:
<comp :foo.sync="bar"></comp>
登入後複製
会被扩展为：
<comp :foo="bar" @update:foo="val => bar = val"></comp>
登入後複製
当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit('update:foo', newValue)登入後複製
有点类似与 v-model
具体见:这里
自定义组件的 v-model(2.2.0 新增)
默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。这也是之前 v-model 默认绑定的元素 和 事件方法。
但是到 2.2.0 时候，我们可以通过 model 配置这个两个属性。
Vue.component('my-checkbox', {
model: {
prop: 'checked', event: 'change'
},
props: {
checked: Boolean, // 这样就允许拿 `value` 这个 prop 做其它事了
value: String
}, // ...})登入後複製
<my-checkbox v-model="foo" value="some value"></my-checkbox>
登入後複製
上述代码等价于：
<my-checkbox :checked="foo"
@change="val => { foo = val }"
value="some value"></my-checkbox>登入後複製
具体见:这里
插槽内容分发
我们不总能遇见我们的组件中包含了哪些元素，这时候我们在开发组件的时候，需要让这部分内容自定义。
假定 my-component 组件有如下模板：
<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div>
登入後複製
父组件模板：
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div>
登入後複製
渲染结果：
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>
登入後複製
当然还有 具名插槽 、作用域插槽(2.1.0 新增)、slot-scope(2.5.0新增)
具体见:这里
动态组件
通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})登入後複製
<component v-bind:is="currentView"> <!-- 组件在 vm.currentview 变化时改变！ --></component>
登入後複製
注意这里的 is 与 之前说的 v-bind:is 别混淆
具体见:这里
对低开销的静态组件使用 v-once
尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：
Vue.component('terms-of-service', {
template: '\ <div v-once>\ <h1>Terms of Service</h1>\ ...很多静态内容...\ </div>\ '})登入後複製
具体见:这里
混合(mixins)的合并策略
周期钩子的合并策略
同名钩子函数将混合为一个数组，因此都将被调用
混合对象的钩子将在组件自身钩子 之前 调用
var mixin = { created: function () { console.log('混合对象的钩子被调用')
}
}new Vue({
mixins: [mixin], created: function () { console.log('组件钩子被调用')
}
})// => "混合对象的钩子被调用"// => "组件钩子被调用"登入後複製
methods, components 和 directives 的合并策略
var mixin = {
methods: { foo: function () { console.log('foo')
}, conflicting: function () { console.log('from mixin')
}
}
}var vm = new Vue({
mixins: [mixin],
methods: { bar: function () { console.log('bar')
}, conflicting: function () { console.log('from self')
}
}
})vm.foo() // => "foo"vm.bar() // => "bar"vm.conflicting() // => "from self"登入後複製
