1. props: 子组件使用父组件中的数据
使用关键步骤:父组件中定义好数据–>子组件props中定义父组件传入数据的类型 --> 父组件使用子组件时,子组件v-bind绑定props中定义的数据到父组件的数据名, 此时在子组件中也能正常使用父组件的数据了。
父组件
// 在子组件中使用父组件定义的数据
<template>
<div>
<div>我是父组件</div>
<props-son :dataList="appData"></props-son>
</div>
</template>
<script>
import propsSon from './props-son.vue'
export default {
data() {
return {
appData: {
title: '我是父组件中定义的数据'}
}
},
components: {
propsSon
}
}
</script>
<style>
</style>
子组件
<template>
<div class="red">
<p>我是子组件</p>
<p>{
{dataList.title}}</p>
</div>
</template>
<script>
export default {
name: 'propsSon',
props: {
dataList: {
type: [Object]
}
},
mounted() {
console.log(this.dataList.title);
}
}
</script>
<style>
.red {
color: red;
}
</style>
结果图如下:
2. $.refs: 父组件使用子组件中的方法
使用关键步骤:子组件在使用时通过ref属性抛出方法,父组件在使用时在methods中通过this.$refs.(ref属性中定义的名称).(子组件中定义的方法) 获得
父组件
// refs 父组件使用子组件中定义的方法
<template