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中图片转base64格式实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue中的传值及赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在Vue中使用this.$store或者是$route一直报错的解决
今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
本文主要介绍了手把手教你写一个vue全局注册的Toast的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
vue router导航守卫（router.beforeEach()）的使用详解
导航守卫主要用来通过跳转或取消的方式守卫导航。这篇文章主要介绍了vue-router导航守卫（router.beforeEach()）的使用,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下2018-02-02
Element-UI的el-table组件是一个非常强大的表格组件,它提供了多种常见的表格功能,如排序、筛选、分页、自定义列模板等,这篇文章主要给大家介绍了关于element-ui el-table表格固定表头的相关资料,需要的朋友可以参考下2024-05-05
在日常开发中，我们会遇到一些情况，限制日期的范围的选择，本文就详细的介绍了ElementUI日期选择器时间选择范围限制的实现，文中通过示例代码介绍的非常详细，感兴趣的可以了解一下2022-04-04
这篇文章主要介绍了vue axios请求频繁时取消上一次请求的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Vue的watch侦听器格式有两种：方法格式和对象格式的侦听器，这篇文章主要介绍了Vue watch 侦听对象属性相关知识,需要的朋友可以参考下2023-04-04
最新评论