今天主要讲一下组件中父组件如何向子组件传递数据的
我们上一节课讲了如何创建组件，如何使用组件。组件是可以被复用的，可以被复用在各种组件中，而其所在的父组件的环境是不尽相同的，即代表着子组件所承接的数据属性等也是不相同的，所以会提出传值的问题。父组件为子组件传递不同的内容，子组件呈现不同的内容，执行不同的操作，而达到各种兼容复用。
父组件传值给子组件，需要两步骤：
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
网友评论