vue父组件向子组件传值_vue什么是父子组件
2023-06-13 09:15:14 时间
组件化开发是目前前端开发必备的开发技能,组件化开发可以大大提高开发效率
今天整理一下Vue的父子组件传值方式,方便还没有理解的朋友学习。
1、父组件向子组件传值
<!-- 父组件 -->
<!-- 父组件调用子组件,看成是调用子组件函数,给子组件传值,就是给函数传参数 -->
<template>
<div>
<!-- 传递动态值前面加个冒号: -->
<!-- 传递静态值就不需要冒号 -->
<childComponent :msg="msg1" />
</div>
</template>
<script> import childComponent from "./child.vue";//引入组件 export default{
components:{
childComponent//注册组件 }, data(){
return{
msg1:"你好" } } } </script>
<!-- 子组件 -->
<!-- 把子组件看成一个函数,props里面就是子组件接受的参数 -->
<template>
<div>
{
{msg}}
</div>
</template>
<script> export default{
props:{
msg:{
type:String, default:"1" } } } </script>
2、子组件向父组件传值
<!-- 父组件 -->
<!-- 子组件向父组件传值就不一样了,需要用到$emit和$on -->
<!-- 父组件监听函数使用@后面接上函数名 -->
<template>
<div>
<!-- 传递动态值前面加个冒号: -->
<childComponent @eventName="handleEvent" />
</div>
</template>
<script> import childComponent from "./child.vue";//引入组件 export default{
components:{
childComponent//注册组件 }, methods:{
handleEvent(data){
//监听子组件触发的函数,data为子组件给父组件传的值 console.log(data); } } } </script>
<!-- 子组件 -->
<!-- 把子组件看成一个函数,props里面就是子组件接受的参数 -->
<template>
<div>
<button @click="triggerEvent">给父组件传值</button>
</div>
</template>
<script> export default{
data(){
msg:"给父组件的信息" }, methods:{
triggerEvent(){
this.$emit("eventName",this.msg);//第一个参数是触发的事件名称,对应着父组件@监听的名字,第二个参数是传给父组件的额外参数,传递多个参数可以直接传对象过去。 } } } </script>
大致讲解如上,个人理解都在备注里面了,如果有没有讲清楚的或者其他不懂的请留言,我会回复各位并更新博客的,以便后面读者阅读!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234588.html原文链接:https://javaforall.cn
相关文章
- vue浏览器缓存问题_vue兼容浏览器能兼容到几
- Vue之Tabbar的实现
- vue中 父组件向子组件传值案例讲解「建议收藏」
- Vue生命周期
- vue代码编辑器组件_vue activiti
- vue md5.js_VUE.js
- vue-cli 初始----安装运行Vue项目
- vue源码分析-动态组件
- 当面试官问你Vue响应式原理,你可以这么回答他
- 如何在vue组件中引入外部的css和js文件[通俗易懂]
- Vue分页导航_vue分页组件
- Vue和vue全家桶有什么区别_Vue和vue全家桶有什么区别
- 百度前端一面高频vue面试题汇总_2023-02-28
- vue中父组件和子组件交互的方式
- Vue提示框组件vue-notification使用实例演示
- IDEA安装Vue插件后为什么创建.vue文件不显示vue图标
- Thinking -- vue性能优化:保持 props 稳定
- 解决Vue中”This dependency was not found”的方法详解编程语言
- vue main.js中app绑定的是index.html还是App.vue中详解编程语言
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- Vue中触发Redis订阅通知(vue中订阅redis)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)