vue组件的5中传参方式总结

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