一、父组件传值子组件
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版权协议,转载请附上原文出处链接和本声明。