Vue组件之间传值(简化版)

一、父组件传值子组件

1、给子组件添加一个自定义属性,其绑定了父组件的一个变量(不加冒号属性是静态的,加冒号的是动态的)

<!-- 父组件 -->
<template>
   <!-- 子组件 --> 
   <child :自定义属性名="父组件的变量"></child> 
<template>

2、在子组件中通过props属性取出父组件的值

<!-- 子组件 -->
export default {
	name: "child",
	props: ["自定义属性名"],
    //自定义属性名即为父组件传入的变量
}

二、子组件传值父组件

1、给子组件添加一个自定义属性,其绑定了父组件的一个函数

<!-- 父组件 -->
<template>  
    <!-- 子组件 -->
	<child  @自定义事件="父组件的处理函数">
<template >

2、在父组件中定义函数进行赋值

<!-- 父组件 -->
export default {
	name: "father",
    data:{
        fatherData:[]
    },
	methods:{
		父组件的处理函数(参数){
            //参数:得到子组件触发事件($emit)时,传递过来的数据
            this.fatherData = 参数;
        }
    }
}

3、在子组件中通过this.$emit(“自定义事件”,数据)触发父组件中的函数进行传参

<!-- 子组件 -->
export default {
	name: "child",
    data:{
        childData:"xxx"
    },
	methods:{
		子组件的处理函数(childData){
            // 将子元素的数据传给父组件,需要自定义触发事件,实现数据的传值
            // 自定义事件绑定的是父组件中的处理函数
            this.$emit('自定义事件',childData);
        }
    }
}

版权声明:本文为weixin_45100742原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。