vue组件概述(1)

app.vue

parent.vue

我是父亲

son.vue

我是儿子

父亲对我说{{title}}-{{thing}}-{{age}}

复制代码

5.父传子的值验证

组件可以为 props 指定验证要求。 为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。

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

}

}

复制代码

6.子传父

与上文相反，子组件传递值到父组件。

app.vue

parent.vue

我是父亲

儿子跟我说话了{{msg}}

son.vue

说话

复制代码

7.插槽

插槽内可以是任意内容。如果子组件没有使用插槽，父组件如果需要往子组件中填充模板或者html, 是没法做到的。 下文介绍普通插槽和具名插槽的使用方法。

app.vue

aaaa

bbbb

cccc

{{message}}

{{props.text}}

HelloWorld.vue

具名插槽1

具名插槽2

儿到父

复制代码

8.缓存keep-alive

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

app.vue

切换