// 提示: v-bind: 简写就是 : v-bind:title="xxx" 就是 :title=:"xxx"
// 传参 - 静态参数
<blog-post title="My journey with Vue">blog-post>
// 动态赋予一个变量的值
<blog-post v-bind:title="post.title">blog-post>
// 动态赋予一个复杂表达式的值
<blog-post v-bind:title="post.title + ' by ' + post.author.name">blog-post>
// 即便 `42` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue
// 这是一个 JavaScript 表达式而不是一个字符串。
<blog-post v-bind:likes="42">blog-post>
// 用一个变量进行动态赋值。
<blog-post v-bind:likes="post.likes">blog-post>
// 包含该 prop 没有值的情况在内,都意味着 `true`。
<blog-post is-published>blog-post>
// 即便 `false` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue
// 这是一个 JavaScript 表达式而不是一个字符串。
<blog-post v-bind:is-published="false">blog-post>
// 用一个变量进行动态赋值。
<blog-post v-bind:is-published="post.isPublished">blog-post>
...
// 特殊注意写法
<blog-post v-bind="post">blog-post>
// post内容
post: { id: 1, title: 'My Journey with Vue' }
// 等同于
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
>blog-post>
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
this.$emit('my-event', '我是子组件传的数据') // 推荐
this._events['my-event'][0]() // 不推荐
// 父 使用 子组件
<navigation-link url="/profile">
Your Profile // 这个地方要没有插槽 就不会显示
<font-awesome-icon name="user">font-awesome-icon> // 甚至可以加组件
navigation-link>
// 子组件
// 找个适当的位置放入一下神奇代码
<slot>slot>
// 子 定义具名插槽
<div class="container">
<header>
<slot name="header">slot>
header>
<main>
<slot>slot>
main>
<footer>
<slot name="footer">slot>
footer>
div>
// 父 使用
<base-layout>
<template v-slot:header>
<h1>Here might be a page titleh1>
template>
<p>A paragraph for the main content.p>
<p>And another one.p>
<template v-slot:footer>
<p>Here's some contact infop>
template>
base-layout>
// v-slot:header 使用这个指令
// 子 current-user
<span>
<slot :attribute="dwpObj">slot>
span>
// 父
<dwp-event @my-event="homeEvent" :dwpObj="dwpObj1">
<h2>父组件内容h2>
<template v-slot="dw">
{{dw.attribute.name}}
template>
// 或者这个样子
<template v-slot="{ attribute }" slot-scope="slotProps">
{{ attribute.name }}
{{ slotProps.attribute.name }}
template>
dwp-event>
dwpObj1: {
name: 'dwp',
tt: 't1'
}
// 这样可以让父组件在插槽中使用子组件中的数据
你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时,你可以使用 v-on
的 .native
修饰符:
<base-input v-on:focus.native="onFocus">base-input>
在有的时候这是很有用的,不过在你尝试监听一个类似 的非常特定的元素时,这并不是个好主意。比如上述
组件可能做了如下重构,所以根元素实际上是一个 元素:
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
label>
这时,父级的 .native
监听器将静默失败。它不会产生任何报错,但是 onFocus
处理函数不会如你预期地被调用。
为了解决这个问题,Vue 提供了一个 $listeners
property,它是一个对象,里面包含了作用在这个组件上的所有监听器。例如:
{
focus: function (event) { /* ... */ }
input: function (value) { /* ... */ },
}
有了这个 $listeners
property,你就可以配合 v-on="$listeners"
将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 的你希望它也可以配合
v-model
工作的组件来说,为这些监听器创建一个类似下述 inputListeners
的计算属性通常是非常有用的:
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
computed: {
inputListeners: function () {
var vm = this
// `Object.assign` 将所有的对象合并为一个新对象
return Object.assign({},
// 我们从父级添加所有的监听器
this.$listeners,
// 然后我们添加自定义监听器,
// 或覆写一些监听器的行为
{
// 这里确保组件配合 `v-model` 的工作
input: function (event) {
vm.$emit('input', event.target.value)
}
}
)
}
},
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on="inputListeners"
>
label>
`
})
现在
组件是一个完全透明的包裹器了,也就是说它可以完全像一个普通的 元素一样使用了:所有跟它相同的 attribute 和监听器都可以工作,不必再使用
.native
监听器。
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件都没有明显的变更来源。
这也是为什么我们推荐以 update:myPropName
的模式触发事件取而代之。举个例子,在一个包含 title
prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:
this.$emit('update:title', newTitle)
然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如:
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
>text-document>
为了方便起见,我们为这种模式提供一个缩写,即 .sync
修饰符:
<text-document v-bind:title.sync="doc.title">text-document>
注意带有 .sync
修饰符的 v-bind
不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’”
是无效的)。取而代之的是,你只能提供你想要绑定的 property 名,类似 v-model
。
当我们用一个对象同时设置多个 prop 的时候,也可以将这个 .sync
修饰符和 v-bind
配合使用:
<text-document v-bind.sync="doc">text-document>
这样会把 doc
对象中的每一个 property (如 title
) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on
监听器。
将 v-bind.sync
用在一个字面量的对象上,例如 v-bind.sync=”{ title: doc.title }”
,是无法正常工作的,因为在解析一个像这样的复杂表达式的时候,有很多边缘情况需要考虑。