在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的。当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性事件来和父组件进行数据交流。

比如,子组件需要某个数据,就在内部定义一个prop属性,然后父组件就像给html元素指定特性值一样,把自己的data属性传递给子组件的这个属性。
而当子组件内部发生了什么事情的时候,就通过自定义事件来把这个事情涉及到的数据暴露出来,供父组件

<my-component v-bind:foo="baz" v-on:event-a="doThis(arg1,...arg2)"></my-component>

如上代码

foo是<my-component>组件内部定义的一个prop属性,baz是父组件的一个data属性,

event-a是子组件定义的一个事件,doThis是父组件的一个方法
过程就是这样: 父组件把baz数据通过prop传递给子组件的foo; 子组件内部得到foo的值,就可以进行相应的操作; 当子组件内部发生了一些变化,希望父组件能知道时,就利用代码触发event-a事件,把一些数据发送出去 父组件把这个事件处理器绑定为doThis方法,子组件发送的数据,就作为doThis方法的参数被传进来 然后父组件就可以根据这些数据,进行相应的操作

属性Props

Vue组件通过props属性来声明一个自己的属性,然后父组件就可以往里面传递数据。

Vue.component('mycomponent',{
template: '<div>这是一个自定义组件,父组件传给我的内容是:{{myMessage}}</div>',
props: ['myMessage'],
data () {
return {
message: 'hello world'
}
}
})

然后调用该组件

<div id="app">
<mycomponent my-message="hello"></mycomponent>
</div>

注意,由于HTML特性是不区分大小写的,所以传递属性值时,myMessage应该转换成 kebab-case (短横线隔开式)my-message="hello"

v-bind绑定属性值

这里说一下v-bind绑定属性值的一个特性:一般情况下,使用v-bind给元素特性(attribute)传递值时,Vue会将""中的内容当做一个表达式。
比如:

<div attr="message">hello</div>

上面这样,div元素的attr特性值就是message

而这样

<div v-bind:attr="message">hello</div>

这里的message应该是Vue实例的data的一个属性,这样div元素的attr特性值就是message这个属性的值。

之所以说是一般情况,是因为classstyle特性并不是这样。用v-bind:classclass传入正常的类名,效果是一样的,因为对于这两个特性,Vue采用了合并而不是替换的原则。

动态绑定特性值

根据上面,想要把父组件的属性绑定到子组件,应该使用v-bind,这样,父组件中数据改变时能反映到子组件。
注意,根据父组件传递给子组件的属性类型的不同,当在子组件中更改这个属性时,会有以下两种情况:

1.当父组件传递的属性是引用类型时,在子组件中更改相应的属性会导致父组件相应属性的更改

<div id="app2">
<div>这是父组件的parentArray:{{parentArray}}</div>
<my-component :child-array="parentArray"></my-component>
</div>
<script>
Vue.component('my-component', {
template: `<div>这是接收了父组件传递值的子组件的childArray: {{childArray}} <br>
<button type="button" @click="changeArray">点击我改变父元素的parentArray</button>
</div>`,
props: ['childArray'],
data () {
return {
counter: 1
}
},
methods: {
changeArray () {
this.childArray.push(this.counter++)
}
}
})
new Vue({
el: '#app2',
data: {
parentArray: []
}
})
</script>

2.当父组件传递值为基本类型时,在子组件中更改这个属性会报错。正确的做法是,在父组件中绑定属性值时,加上.sync修饰符。

<my-component :child-array.sync="parentArray"></my-component>

然后在子组件中改变相应的属性

methods: {
changeArray () {
this.counter++
this.$emit('update:childArray', this.counter)
}
}

子组件希望对传入的prop进行操作

一般来说,是不建议在子组件中对父组件中传递来的属性进行操作的。如果真的有这种需求,可以这样:

1.父组件传递了一个基本类型值,那么可以在子组件中创建一个新的属性,并以传递进来的值进行初始化,之后就可以操作这个新的属性了

props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}

2.父组件传递了一个引用类型值,为了避免更改父组件中相应的数据,最好是对引用类型进行复制。复杂的情况,肯定应该是深复制。

给子组件传递正确类型的值

同样是上面的原因,静态的给子组件的特性传递值,它都会把他当做一个字符串。

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>

子组件中,特性的值是字符串 "1" 而不是 number 1。如果想传递正确的数值,应该使用v-bind传递,这样就能把传递的值当做一个表达式来处理,而不是字符串。

<!-- 传递实际的 number 1 -->
<comp v-bind:some-prop="1"></comp>

Prop验证

我们可以给组件的props属性添加验证,当传入的数据不符合要求时,Vue会发出警告。

Vue.component('example', {
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
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 value > 10
}
}
}
})

type 可以是下面原生构造器:

String

Number

Boolean

Function

Object

Array

Symbol

type 也可以是一个自定义构造器函数,使用 instanceof 检测

 // 自定义Person构造器
function Person(name, age) {
this.name = name
this.age = age
}
Vue.component('my-component', {
template: `<div>名字: {{ person-prop.name }}, 年龄: {{ person-prop.age }} </div>`,
props: {
person-prop: {
type: Person // 指定类型
}
}
})
new Vue({
el: '#app2',
data: {
person: 2 // 传入Number类型会报错
}
})

非Prop类型的属性

也可以像在html标签中添加data-开头的自定义属性一样,给自定义组件添加任意的属性。而不仅限于data-*形式,这样做的话,Vue会把这个属性放在自定义组件的根元素上。一个自定义组件的模板只能有一个根元素

覆盖非Prop属性

如果父组件向子组件的非prop属性传递了值,那么这个值会覆盖子组件模板中的特性。

<div id="app3">
<my-component2 att="helloParent"></my-component2>
</div>
<script>
Vue.component('my-component2', {
template: `<div att="helloChild">子组件原有的特性被覆盖了</div>`
})
new Vue({
el: '#app3'
})
</script>

上面渲染的结果是,divatt属性是helloParent
注意:前面已经提到过,覆盖原则对于classstyle不适用,而是采用了合并(merge)的原则。

<div id="app3">
<my-component2 att="helloParent" class="class2" style="color: red;"></my-component2>
</div>
<script>
Vue.component('my-component2', {
template: `<div att="helloChild" class="class1" style="background: yellow;">子组件原有的特性被覆盖了</div>`
})
new Vue({
el: '#app3'
})
</script>

上面的渲染结果是,div的类名是class1 class2,行内样式是color:red; background:yellow;

Vue组件-组件的属性的更多相关文章

  1. 深入理解Vue父子组件通讯的属性和事件

    在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...

  2. Java成神之路:第一帖---- Vue的组件属性components用法

    Vue的组件属性:components 使用场景 一般在项目的使用过程中,某个需要多次使用的模块,会将整个模块抽取出来,写一个组件,供给其他页面进行调用或者是在一个页面中,多次使用到一个重复的代码样式 ...

  3. 03 . Vue基础之计算属性,组件基础定义和使用

    vue组件 fetch请求组件 fetch XMLHttpRequest是一个设计粗糙的API, 配置和调用方式非常混乱,而且基于事件的异步模型写起来不友好,兼容性不好. <!DOCTYPE h ...

  4. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

  5. vue父组件如何调用子组件的属性或方法

    常常我们需要组件的拆分,就涉及到父子调用的关系,那么父组件如何调用子组件的属性和方法呢? 子组件child <template> <div> {{msg}} </div& ...

  6. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  7. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  8. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

  9. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

随机推荐

  1. RT-thread内核之互斥量

    一.互斥量控制块:在include/rtdef.h中 #ifdef RT_USING_MUTEX /** * Mutual exclusion (mutex) structure */ struct ...

  2. JavaScript-序列化及转义

    1.  for循环: while循环: 2. 条件语句: 类似于if else的功能. name='1'; switch(name){ case:'1': console.log(123); brea ...

  3. html的body内标签之图片及表格

    <li> list 标签定义和用法: <li> 标签定义列表项目. <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中 ...

  4. [清华集训2017]无限之环(infinityloop)

    description 题面 solution 一开始的思路是插头\(DP\),然而复杂度太高 考虑将网格图黑白染色后跑费用流 流量为接口数,费用为操作次数 把一个方格拆成五个点,如何连边请自行脑补 ...

  5. 【以前的空间】bzoj 1052 [HAOI2007]覆盖问题

    这道题的思路挺简单的……就是可以证明如果要覆盖一个区域内的点,那么一定有一个正方形在这“区域内的点所围成的最大矩形的四个角中的一个”(不要吐槽很多的“的”……),对于长度r是否可以覆盖整个区域内的点, ...

  6. BZOJ5323 & 洛谷4562:[JXOI2018]游戏——题解

    https://www.luogu.org/problemnew/show/P4562 https://www.lydsy.com/JudgeOnline/problem.php?id=5323 (B ...

  7. 命令:ln 使用方法

    http://linux.chinaunix.net/man/2004-10-06/45.shtml 指令名称 : ln 使用权限 : 所有使用者 使用方式 : ln [options] source ...

  8. bzoj3232

    Description DZY家的后院有一块地,由N行M列的方格组成,格子内种的菜有一定的价值,并且每一条单位长度的格线有一定的费用. DZY喜欢在地里散步.他总是从任意一个格点出发,沿着格线行走直到 ...

  9. 谈谈Javascript的匿名函数

    JQuery 里面有这么一种代码: (function(){ // code here })(); 当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来,神奇吧! 要说匿名函数 ...

  10. Django 2.0 URL

    Overview¶ A view is a “type” of Web page in your Django application that generally serves a specific ...