Vue的子父组件传值之小白必看篇
搭建的框架目录结构
一、父传子动图效果及源码
父传子源码
父组件：
<template> <div> <div> <p v-html="theCardTitle"></p> <button @click="sendMessage">OK</button> </div> <div> <ChildCard :parentMessage="parentMessage"></ChildCard> </div> </div> </template>
<script>
import ChildCard from "../sub/ChildCard";
export default {
data() {
return {
theCardTitle: "父组件",
parentMessage: ""
};
},
components: {
ChildCard
},
methods: {
sendMessage() {
this.parentMessage = "<b>消息来自父组件：</b> (^_^)!";
}
},
};
</script>子组件：
<template> <div> <div> <p v-html="theCardBody"></p> <div v-html="parentMessage"></div> </div> </div> </template>
<script>
export default {
props: ["parentMessage"],
data() {
return {
theCardBody: "子组件"
};
}
};
</script>二、子传父动图效果
子传父源码
父组件：
<template>
<div>
<div>
<p v-html="theCardTitle"></p>
<span>{{parentMessage}}</span>
<ChildCardOne @childByValue="childByValue"></ChildCardOne>
</div>
</div>
</template><script>
import ChildCardOne from "../sub/ChildCardOne";
export default {
data() {
return {
theCardTitle: "父组件",
parentMessage: ""
};
},
components: {
ChildCardOne
},
methods: {
childByValue(childValue) {
this.parentMessage = childValue;
}
}
};
</script>子组件：
<template>
<div>
<p v-text="theCardTitle"></p>
<span>{{childValue}}</span>
<div>
<button @click="ok">OK</button>
</div>
</div>
</template><script>
export default {
data() {
return {
theCardTitle: "子组件",
childValue: "我是子组件的数据"
};
},
methods: {
ok() {
this.$emit("childByValue", this.childValue);
}
}
};
</script>三、详细解说组件传递过程：组件传值模板
也可以说这部分的内容是将组件的传递过程的关键代码给抽离出来了，帮助大家更好的理解如何使用传值！
1.父--->子
①属性props
子组件利用props接收父组件传递过来的数据
指的是从外部设置的属性，需子组件设置props属性
注意：
props严格用于父组件与子组件之间的单向通讯，并且你不希望尝试直接在子组件中更改props的值。
否则，将收到类似这样的错误信息“避免直接修改某个prop，因为当父组件重新渲染时，该值将被覆盖” 这样的错误。
父组件：
1.点击事件进行传值，在template中添加组件
<button @click="OK">给子组件发送一个消息</button>
2.父组件自定义方法将data里的数据传递过去：
<子组件名称 :自定义事件="绑定的方法"></子组名称>
data() {
return {
自定义事件: ""
};
},3.引用子组件：
import 子组件名称 from "子组件路径";
4.注册子组件，注册位置与methods同级：
components: {
子组件名称
},5.在methods中写入点击事件
methods: {
OK() {
this.自自定义事件 = "传递过去的数据";
}
}子组件：
1.定义个插糟，接收渲染传递过来的数据
<div v-html="自定义事件"></div>
1.接收父组件传递过来的值
<script>
export default {
props: ["自定义事件"],
};②引用refs传值
父组件通过refs给子组件传值
父组件：
1.引用子组件：
import 子组件名称 from "子组件路径";
2.注册子组件，注册位置与methods同级：
components: {
子组件名称
},3.看你是什么需求了，什么需求写在什么函数下：
周期函数(){this.$refs.父组件名称.子组件名称=“传递的参数”}
4.声明父组件名称：
<子组件名称 ref=“父组件名称”></子组件名称>
子组件：
1.声明子组件：
<组件名称>子组件名称</组件名称>
2.将子组件名称定义到data中：
data（）{return{子组件名称：}}2.子--->父
①属性emit
子组件：
1.利用插值表达式显示传递过去的数据：
<span>{{子组件数据}}</span>2.将变量定义到data中
export default {
data() {
return {
子组件数据: "子组件的数据"
};
},
}3.点击事件进行传值，在template中添加组件：
<button @click="ok">OK</button>
4.向父组件传值，在methods下定义事件：
methods: {
ok() {
this.$emit("自定义事件", this.子组件数据);
}
}
};父组件：
侦听自定义事件
1.利用插值表达式，将子组件传递过来的数据显示出来
<span>{{插值表达式}}</span>2.将变量自定义到data中
export default {
data() {
return {
插值表达式: ""
};
},
};3.父组件自定义方法侦听子组件传过来的值：
<子组件名称 @自定义事件="绑定的方法"></子组名称>
4.引用子组件：
import 子组件名称 from "子组件路径";
5.注册子组件，注册位置与methods同级：
components: {
子组件名称
},6.在methods中侦听子组件传过来的值：
methods: {
自定义事件(子组件数据) {
this.插值表达式 = 子组件数据;
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue结合leaflet实现鹰眼图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
假设 App 的用户可以在短时间内进行多个 API 调用,但您只想显示上次调用的结果,之前正在进行的请求变得无关紧要,在这种情况下,您可以利用 Axios 拦截器,本文给大家介绍了如何使用Axios拦截器中止Vue请求,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue 实现图片懒加载功能的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了如何解决Element UI中NavMenu折叠菜单的坑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
class 与 style 绑定就是专门用来实现动态样式效果的技术,如果需要动态绑定 class 或 style 样式,可以使用 v-bind 绑定,本文给大家讲解Vue 绑定style和class样式,感兴趣的朋友一起看看吧2023-10-10
provide/inject 适用于跨级通信，在孙组件中通过依赖注入的方式能获取到父组件中改变的这个值，下面通过实例代码介绍vue3-组合式api-provide/inject的相关知识,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue工程如何为组件自动注入全局样式文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue项目中使用axios遇到的相对路径和绝对路径问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue中声明式导航与编程式导航，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-11-11
微信、支付宝支付密码时的密码输入框大家都很熟悉，本文主要介绍了vue3如何实现6位支付密码输入框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论