【学习笔记】vue-cli中组件间传参的方式

一、父子组件传参

首先创建子组件,子组件的名字为component1.vue

<template>
    <div class="">
        <div class="">
            <span>接受父组件:{{name}}</span>
            <el-button type="primary" @click="Forward()">打印父组件的信息</el-button>
        </div>
    </div>
</template>

<script>
export default {
    // 子组件通过props组件接收，name需要和父组件的key一致
    props:['name'],
    data() { 
        return {
        }
    },

    mounted(){},

    methods:{
        Forward(){
            console.log(this.name);
        },
       
    },
}
</script>

然后在父组件中引用并向子组件传参

<template>
    <div class="">
        <!--向子组件传入name参数-->
        <Component1  :name="name"></Component1>
    </div>
</template>

<script>
import Component1 from "./moudles/component1"
export default {
	components:{
		Component1
	},
	data () {
		return {
			name:"父组件信息发送",
		}
	},
	methods:{}
}
</script>

二、子组件向父组件传参

首先创建子组件，这里的名字为component2.vue

<template>
    <div class="">
        <div class="">  
            <span>向父组件发送数据：{{childval}}</span>
            <el-button type="primary" @click="reverse()">发送父组件的信息</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() { 
        return {
            childval:"子组件的数据test"
        }
    },

    mounted(){},

    methods:{
        //子组件需要使用this.$emit()方法将参数传入父组件，第一个参数要和父组件绑定的方法名一致
        reverse(){
            this.$emit('childval',this.childval)
        }
    },
}
</script>

<style scoped>

</style>

然后配置父组件接收

<template>
	<div class="">
			<p>父组件接收:{{valueName}}</p>
			<Component2  @childval="childvalFun"></Component2>
	</div>
</template>

<script>
import Component2 from "./moudles/component2" 
export default {
	components:{
		Component2
	},
	data () {
		return {
			valueName:null
		}
	},
	methods:{
		childval(data){
			this.valueName= data
			console.log(data) //子组件传入的参数
		}
	}
}
</script>