学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

VUE之组件(复用性、props、单向数据流)

组件组织

通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE:组件化、数据驱动
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))
例如,可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、标题之类的组件。
为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。
组件的注册类型分两种:全局注册和局部注册。

组件复用性

可以将组件进行任意次数的复用,例如,利用组件定义一个超级链接,在项目中多次使用
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

单个根元素限制

场景:写一个广告组件(包含广告标题、广告词)
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))
如果在模板中这样写,Vue 会显示错误,并解释道 every component must have a single root element (每个组件必须只有一个根元素)。

解决方案:将模板的内容包裹在一个父元素内,来修复这个问题

学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))
即组件模板template的单个根元素限制。

识别组件

识别父组件与子组件:
①在js中创建注册组件的代码被称为“子组件”(组件模板→子组件)
②在HTML文档中引用组件的代码被称为“父组件”(组件引用→父组件)

学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

小结:注册处为子组件、引用处为父组件。

props传值

子组件的数据有时需要从父组件获取调用,此时便可以用props 从父级接收数据,props 的值可以是两种,字符串数组或者对象。接下来主要介绍下字符串数组的用法。

案例1:

在子组件的友情链接描述里应用了父组件的数据,通过props接收数组格式的数据describtion,并将其渲染到组件模板中。
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

props-动态传值

动态传值:日常开发里,传递的数据并不是直接写死的,而是来自父级的动态数据,使用指令 v-bind来动态绑定 props 值,当父组件的数据变化时,也会传递给子组件
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

props传值

案例2:给文章组件传递一个标题

学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))
由于HTML特性不区分大小写,当使用 DOM 模板时,驼峰命名的 props 名称要转为短横分隔命名 。

注意事项:

1、子组件通过props接收父级组件传递的数据
2、由于HTML特性不区分大小写,当使用 DOM 模板时,驼峰命名的 props 名称要转为短横分隔命名 。
(即HTML中引用是短横分隔命名blog-title,JS的DOM模板里为小驼峰命名blogTitle,两者可以对应识别)

props传值-多个值

在组件的自定义标签上直接写该 props 名称,如果要传递多个数据,在 props 数组中添加项即可。

案例3:

文章组件,组件data自带文章主体内容。
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

接下来从父级组件给传入文章标题、作者等信息

学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

props传值-多个值(事件绑定)

案例分析:props 选项传值VS组件自身data函数return数据
①区别:props 来自父级,而 data是子组件自身数据,作用域是组件本身。
②这两种数据都能在模板 template 及计算属性 computed和方法 methods 中使用。
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

props传值-数组

案例4:

场景→书籍卖书广告。在典型应用中,可能在 data 里有一个数组,组件通过遍历展示:
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

案例4:接下来给组件添加方法

学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))
可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容,比如从一个 API 获取博文列表的时候,是非常有用的

props传值练习

课堂练习:通过props传值动态绑定

用v -model 绑定父级组件的数据nameValue,当通过输入框任意输入时,子组件接收到props,userName也会实时响应,并更新组件模板。
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

单向数据流

Vue 2.x与Vue 1.x 比较大的改变就是,Vue2.x 通过 props 传递数据是单向的了, 也就父组件数据变化时会传递给子组件,但是反过来不行。
之所以这样设计,是尽可能将父子组件解耦,避免子组件无意中修改了父组件的状态。
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

[Vue警告]:避免直接改变道具,因为只要父组件重新渲染,该值就会被覆盖。

改变 props

业务中会经常遇到两种需要改变 props 情况

(1)父组件传值→子组件保存初始值(初始化后解耦)
第一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改。这种情况可以在组件 data 再声明一个数据,引用父组件的 props ,示例代码如下:

学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

案例解析:

组件中声明了数据 childValue它在组件初始化时会获取来自父组件的 countValue之后就与之无关了,只用维护 childValue,这样就可以避免直接操作父级组件count数据。

(2)被转变的原始值

另一种情况就是 props作为需要被转变的原始值传入。这种情况用计算属性就可以了。示例代码如下
学习VUE第八天课程(VUE之组件(复用性、props、单向数据流))

因为用 css 传递宽度要带单位( px ),但是每次都写太麻烦,而且数值计算一般是不带单位,所以统 在组件内使用计算属性就可以了。

课堂总结

(1)组件组织:通常一个应用会以一棵嵌套的组件树的形式来组织,VUE两大核心思想–组件化、数据驱动。
(2)组件复用性:可以将组件进行任意次数的复用
(3)单个根元素限制:every component must have a single root element (每个组件必须只有一个根元素)
(4)识别父组件与子组件:注册处为子组件、引用处为父组件
(5)props传值:通过 Prop 向子组件传递数据,即子组件的数据有时需要从父组件获取调用,此时便可以用props 从父级接收数据

如有问题或者疑问请留言联系小编!!!

感谢来访!!!