资讯专栏INFORMATION COLUMN

Vue初步了解组件——父子组件

Bowman_han / 1200人阅读

摘要:父组件的数据需要通过才能下发到子组件中。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。另外,每次父组件更新时,子组件的所有都会更新为最新值。

组件 什么是组件?

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
也可分为:

有结构HTML

有样式CSS

有交互(效果)

行为

信号量存数据

系统组件

组件的行为可以定制?通过属性设置

在Vue中有什么样的组件(组件进行分类):
实现基本功能的基础的组件(最小的元素)
可复用的逻辑组件(业务组件)
页面组件

页面上所有的东西全都是组件:形成了组件树

局部注册--自定义组件

你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件:

//在html中是使用

var Child = {
  template: "
A custom component!
" } var vm = new Vue({ el: "#app", components: { // Child 将只在父组件模板中可用 Child } })

这种封装也适用于其它可注册的 Vue 功能,比如指令。

组件树

页面上所有的东西全都是组件:形成了组件树

// 头部组件
var AppHead = {
    template: `
app head
` }; // 主窗口单元组件 var AppMainUnit = { template: `
app main unit
` } // 主窗口组件 var AppMain = { template: `
app main
`, components: { AppMainUnit } } // 侧边栏单元组件 var AppSideUnit = { template: `
app side unit
` } // 侧边栏组件 var AppSide = { template: `
app side
`, comp onents: { AppSideUnit } } // 根组件 var vm = new Vue({ el: "#app", components: { AppHead, AppMain, AppSide } })
组件data

子组件与根组件的data用法不同

根组件data:

var vm = new Vue({
    el: "#app",
    data: {
        msg: ""
    },
    components: {
        MyLi
    }
})

{{msg}}
调用其中的msg

子组件data:

var MyLi = {
//那么 Vue 会停止运行,并在控制台发出警告,告诉你在组件实例中 data 必须是一个函数。
    data() {
        console.log(1);
        return {
            counter: 0
        }
    },
    template: ``
}
//根组件
var vm = new Vue({
    el: "#app",
    data: {
        msg: "123"
    },
    components: {
        MyLi
    }
})




输出结果:0 0 0
props声明

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

var Child = {
    template: `{{message}}{{myMessage}}`,
//声明当前组件内部能够接受一个message的属性,如果是驼峰式命名,在传递参数时使用小写,
    props: ["message","myMessage"]
}
var vm = new Vue({
    el: "#app",
    data: {
        parentMessage:"h"
    },
    components: {
        Child
    }
})

在html中使用:

//父组件赋值到子组件

//实时同步的pareMessage值
props--作为组件内部的初始状态

Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。
在两种情况下,我们很容易忍不住想去修改 prop 中数据:

Prop 作为初始值传入后,子组件想把它当作局部数据来用;

Prop 作为原始数据传入,由子组件处理成其它数据输出。

var Child = {
    template: `
{{initCounter}} {{childCounter}}
`, props:["initCounter"], data(){ //保存初始值到childCounter并返回,发生变化的是当前的childCounter的值 return {childCounter: this.initCounter} } } var vm = new Vue({ el: "#app", data: { counter: 0 }, components:{ Child } }) 在html中调用:
props的计算后属性

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

var Child = {
    template: `
{{size}} {{normalSize}}
`, props: ["size"], computed: { normalSize(){ return this.size.trim().toLowerCase(); } } } var vm = new Vue({ el: "#app", data:{ parentSize: " THREE" }, components:{ Child } }) 在html中调用:
props--验证

我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求,Vue 会发出警告。这对于开发给他人使用的组件非常有用。

要指定验证规则,需要用对象的形式来定义 prop,而不能用字符串数组:

var Child = {
    template: `
{{pa}} {{pb}} {{pc}} {{pd}} {{pe}} {{pf}}
`, props: { pa: Number, pb: [String, Number], pc: { type: Number, required: true//必填 }, pd: { type: Number, default: 100//默认值 }, pe: { type: Object, default: function(){ return { hello : "world" } } }, pf: { type: Number, validator: function(v){ return v > 100 }//自定义属性判断 } } } var vm = new Vue({ el: "#app", data:{ pa: 2, pb: "abc", pc: 2, pd: 50, pe: {}, pf: 120 }, components:{ Child } }) 在html中使用:
type 可以是下面原生构造器:

String

Number

Boolean

Function

Object

Array

Symbol

type 也可以是一个自定义构造器函数,使用 instanceof 检测。
当 prop 验证失败,Vue 会抛出警告 (如果使用的是开发版本)。注意 prop 会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,诸如 data、computed 或 methods 等实例属性还无法使用。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51505.html

相关文章

  • 关于vuevuex的一些初步小结

    摘要:只能是同步函数,原因是无法捕捉异步函数的快照。除了这三个概念外,还有类比计算属性,用于从派生出一些值分割较大的状态树,便于管理。处理表单可手动监听或是使用带的双向绑定计算属性。 一、Vue组件的创建 一般语法: Vue.component(tagName, options) 务必在根组件实例化之前注册组件 组件options说明: data: 必须是一个函数,目的在于返回独立的对象...

    joywek 评论0 收藏0
  • Vue 组件间通信方式

    摘要:本身提供哪几种通信方式首先灵感源于,支持双向绑定,本质还是单向数据流。跟一样,组件间最基本的数据流是通过向子组件传递数据。但是在却很少使用,因为组件可以自定义事件,即后面的组件间通信方式其实就是订阅发布模式。 例子是在 jsrun.net 平台编写,不支持移动端平台,所以本文建议在 PC 端进行阅读。 Vue 是数据驱动的视图框架,那么组件间的数据通信是必然的事情,那么组件间如何进行数...

    hss01248 评论0 收藏0
  • vue -- 非父子组件传值,事件总线(eventbus)的使用方式

    摘要:我的个人博客地址资源地址非父子组件传值,事件总线的使用方式我的博客地址如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。 欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 先说一下什么是事件总线,其实就是订阅发布者模式; 比如有一个bus对象,这个对象上有两个方法,一个是on(监听,也就是订阅),一个是emit(触发,也就...

    zone 评论0 收藏0
  • Vue父子组件通信的三两事(prop、emit)

    摘要:的单向数据传递直接作为一个本地变量下面是我的子组件这是父组件给我传的数据运行结果如下图子组件向父组件传递数据基本使用子组件向父组件传递数据,不能像上面一样实时的传递数据,必须通过事件触发。 组件是Vue核心功能之一,合理的组件化,可以减少我们代码的冗余,提高项目的可维护性。下面,我将由浅入深的讲Vue的组件在讲之前,首先我们先了解一下组件的命名。 HTML是对特征名不敏感的语言,他...

    darcrand 评论0 收藏0

发表评论

0条评论

Bowman_han

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<