
今天主要讲一下组件中父组件如何向子组件传递数据的
我们上一节课讲了如何创建组件,如何使用组件。组件是可以被复用的,可以被复用在各种组件中,而其所在的父组件的环境是不尽相同的,即代表着子组件所承接的数据属性等也是不相同的,所以会提出传值的问题。父组件为子组件传递不同的内容,子组件呈现不同的内容,执行不同的操作,而达到各种兼容复用。
父组件传值给子组件,需要两步骤:
1. 在父组件的Dom里的子组件标签里设置一个动态的自定义属性,将数据存储在里面,当然,首先需要在data里设置一下这个数据
<v-header :title="title"></v-header>
前一个title是自定义的属性,后一个title是数据里定义的数据
2. 在子组件里接收这个属性里的数据,接收用props
props: ['title']
第一步的完整代码--这部分是在父组件里完成:
html部分:
<div id="root">
<v-header :title="title"></v-header>
</div>
js部分:
import Header from './components/Header.vue'
export default {
components: {
'v-header': Header
},
data() {
return {
title: "首页"
}
}
}
第二步的完整代码--在子组件里完成:
html部分:
<div class="header">
{{ title }}
</div>
js部分:
props: ['title'],
data () {
return {
}
}
接下来我们就可以看到页面效果啦!
PS:
props是一个数组,也可以是对象,如果是对象的话,可以栓查传递过来的数据是否是我们需要的类型,以及给数据设置一个初始值,其可以改成:
props: {
title: {
type: String,
default: 'header'
}
}
父组件不仅可以传递这种简单的字符串,数值,还可以传递方法。我们可以做下改动,在methods里定义一个方法,同样在Dom里设置它的自定义属性,代码如下:
html部分:
<div id="root">
<v-header :title="title" :go="go"></v-header> //这里第二个go不要加(),加了就执行了
</div>
js部分:
components: {
'v-header': Header
},
data() {
return {
title: "首页"
}
},
methods: {
go () {
alert("this is home")
}
}
子组件里--html部分:
<div class="header">
{{ title }}
<button class="button" @click="go">点我</button>
</div>
子组件里--js部分:
props: ['title', 'go'],
点击一下按钮,是否能显示出“this is home”呢?
是不是觉得父母辈是很强大的,所有的东西都可以毫无保留地传授给他们的子女?
欢迎加入我们的前端学习交流群一起成长:duzhan2018
网友评论