父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息
- 父组件向子组件传值:
- 子组件在props中创建一个属性,用来接收父组件传过来的值;
- 在父组件中注册子组件;
- 在子组件标签中添加子组件props中创建的属性;
- 把需要传给子组件的值赋给该属性
- 子组件向父组件传值:
- 子组件中需要以某种方式(如点击事件)的方法来触发一个自定义的事件;
- 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应事件的方法;
- 在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
1.父传子
父组件
<template>
<div class="father">
<h1>我是父组件</h1>
<!-- :message 是 v-bind:message 的简写-->
<child :message="MsgToChild"></child>
</div>
</template>
<script>
// 引入Child子组件
import child from './child'
export default {
// 注册Child子组件
components: { child },
name: 'father',
data () {
return {
MsgToChild: '父组件传给子组件'
}
},
mounted () {
},
methods: {
}
}
</script>
<style scoped>
h1 {
color: red;
}
</style>
子组件
<template>
<div class="child">
<h1>我是子组件(粉色区域是子组件的区域)</h1>
<!-- 获取到获取到父组件传给子组件的message,显示在页面上-->
<p>我是 => {{message}}</p>
</div>
</template>
<script>
export default {
name: 'child',
// 创建props,然后创建一个名为message的属性,来接收父组件传过来的值
props: ['message'],
data () {
return {
}
},
mounted () {
// 获取到父组件传给子组件的message
console.log('打印出父组件传给子组件的值=>', this.message)
},
methods: {
}
}
</script>
<style scoped>
.child {
background-color: pink;
}
h1 {
color: blue;
}
p {
color: green;
font-size: 30px;
}
</style>
2.子传父
父组件
<template>
<div class="father">
<h1>我是父组件</h1>
<!--@messageToFather 是 v-on:messageToFather 的简写 -->
<child @messageToFather="msgFromChild"></child>
</div>
</template>
<script>
// 引入Child子组件
import child from './child'
export default {
// 注册Child子组件
components: { child },
name: 'father',
data () {
return {
}
},
mounted () {
},
methods: {
// 获取到子组件传给父组件的函数
msgFromChild (data) {
// data就是子组件传给父组件的值
console.log('打印出子组件传给父组件的值=>', data)
}
}
}
</script>
<style scoped>
h1 {
color: red;
}
</style>
子组件
<template>
<div class="child">
<h1>我是子组件(粉色区域是子组件的区域)</h1>
<!--@click 是 v-on:click 的简写 -->
<button @click="btn">点击</button>
</div>
</template>
<script>
export default {
name: 'child',
data () {
return {
MsgToFather: '子组件传给父组件'
}
},
mounted () {
},
methods: {
// 点击按钮使用 $emit() 方法去传值给父组件
btn () {
// 'messageToFather' 是 传给父组件的方法, '子组件传给父组件' → 是传给父组件的值
this.$emit('messageToFather', this.MsgToFather)
}
}
}
</script>
<style scoped>
.child {
background-color: pink;
}
h1 {
color: blue;
}
p {
color: green;
font-size: 30px;
}
</style>