脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3组件间的传值(props)

vue3中的组件间的传值(props)

 更新时间：2023年04月24日 09:17:36   作者：拾柒念  
这篇文章主要介绍了vue3中的组件间的传值(props)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue3组件间的传值(props)

父组件向子组件传值

在父组件中：

1.引入ref

2.定义要传递的属性和属性值

3.向vue页面中的子组件传递该属性属性

传递属性

:传给子组件的名字（自定义） = “对应定义在父组件的属性名”

在子组件中：

4.接收父组件传来的属性

props: {
 showDialogVisible: Boolean
},
setup() {
 return {
 }
}

5.注册该组件

setup(props) {
    // 可以打印查看一下props传过来的属性以及属性的值
	console.log(props);
	
	return {
		props
	}
}

6.在子组件的页面使用该属性

父组件向子组件传值完成！

子组件向父组件传值（常规）

  • 在子组件中：

由于vue数据传递是单向数据流，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改，用emit 通知父组件去修改。

1.在子组件中定义要修改父组件那个属性（或方法）的值

setup(props,context) {
    context.emit('setShow', false);
	
	return {
	}
}
//也可以：es6解构赋值取到emit
//setup(props,{emit}) {
//    emit('setShow', false);
//	
//	return {
//	}
//}

context.emit(‘传入父组件自定义的属性名’, 属性值);

  • 在父组件中：

2.再页面接收子组件中传入的自定义属性名，绑定在自身对应的属性（方法）上

父组件向子组件传值完成！

附上我的父组件方法：

子组件向父组件传值（v-model）

​ 如果子组件向父组件传的值正好是父组件向子组件传的值，可以直接在该属性上进行双向绑定。

注：阅读此小节建议先看完第一节：父组件向子组件传值

  • 在子组件上：

1.直接修改从props中拿到的属性

  • 在父组件上：

2.在父页面中的子组件上进行绑定

传值完成！

vue3组件之间传值和事件处理

这篇文章前自己也网上找了资料，发现这块资料极少，所以还是自己记录一下

项目需求是每个页面需要加上顶部导航栏，加返回事件

 先写子组件代码，在components目录下建一个nav.vue文件：

子组件nav.vue文件内容

<template>
   <div>
    <el-affix position="top" :offset="0">
        <div class="nav">
          <span @click="backGo"><img src="../assets/back.png"/>返回</span>
          <p>{{title}}</p>
        </div>
    </el-affix>
  </div>
</template>
<script setup>
import{ defineProps } from "vue"
const props =defineProps({ //子组件定义接收父组件传过来的值
       title:String 
})
//点击返回事件
const backGo = () => {
    history.back()
}
</script>
<style scoped>
.nav{width: 100%;height:.6rem;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;background-color: #ffffff;border-bottom: 1px solid #f0f0f0;}
.nav span{position: absolute;height:100%;left: .2rem;top: 0;display: flex;align-items: center;color: #8a8a8a;}
.nav span img{width: .32rem;}
</style>

父组件aboutus.vue文件：

<template>
  <div class="wrap">
      <Nav title="关于我们"></Nav> <!--记住这里第一个字母大写哦-->
        <div class="lists">
          <ul class="abus">
              <li><p><router-link to="/company">公司介绍</router-link></p></li>
              <li><p><router-link to="/privacy">隐私政策</router-link></p></li>
              <li><p><router-link to="/useragree">用户协议</router-link></p></li>
          </ul>
      </div>
  </div>
</template>
<script setup>
import Nav from '@/components/nav.vue' 
 
</script>

记住引入子组件时，第一个字母大写哦 ！

是不是很简单！

下面介绍子组件传值

同样是拿子组件nav.vue来测试，直接上代码：

<template>
    <div>
    <el-affix position="top" :offset="0">
    <div class="nav">
      <span @click="backGo"><img src="../assets/back.png"/>返回</span>
      <p>{{title}}</p>
    </div>
  </el-affix>
    </div>
</template>
<script setup>
import{ defineProps ,defineEmits} from "vue"
const emits =defineEmits(['getBackGo']) //注册父组件回调方法
const props =defineProps({
       title:String
})
const backGo = () => {
    // history.back()
    emits("getBackGo","传个值给父组件！")
}
</script>
<style scoped>
.nav{width: 100%;height:.6rem;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;background-color: #ffffff;border-bottom: 1px solid #f0f0f0;}
.nav span{position: absolute;height:100%;left: .2rem;top: 0;display: flex;align-items: center;color: #8a8a8a;}
.nav span img{width: .32rem;}
</style>

来看看父组件aboutus.vue写法：

<template>
  <div class="wrap">
      <Nav title="关于我们" @getBackGo="getBackGoInfo"></Nav>
      <img src="../../assets/logo.jpg" class="logo"/>
      <div class="lists">
          <ul class="abus">
              <li><p><router-link to="/company">公司介绍</router-link></p></li>
              <li><p><router-link to="/privacy">隐私政策</router-link></p></li>
              <li><p><router-link to="/useragree">用户协议</router-link></p></li>
          </ul>
      </div>
  </div>
</template>
<script setup>
import Nav from '@/components/nav.vue'
const getBackGoInfo = (value) => {
    console.log(value)
}
 
</script>

效果如下：

完美！ 

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue实现模糊查询搜索功能的步骤详解

    Vue实现模糊查询搜索功能的步骤详解

    本文主要介绍了Vue实现模糊查询搜索功能的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • vue3移动端嵌入pdf的多种方法小结

    vue3移动端嵌入pdf的多种方法小结

    这篇文章主要介绍了vue3移动端嵌入pdf的多种方法小结,使用embed嵌入有好处也有缺点,本文给大家讲解的非常详细,需要的朋友可以参考下
    2023-10-10
  • js 实现拖拽排序详情

    js 实现拖拽排序详情

    这篇文章主要介绍了js 实现拖拽排序，拖拽排序对于小伙伴们来说应该不陌生，平时工作的时候，可能会选择使用类似Sortable.js这样的开源库来实现需求。但在完成需求后，大家有没有没想过拖拽排序是如何实现的呢？感兴趣得话一起来看看下面文章得小心内容吧
    2021-11-11
  • 使用Vite构建Vue3项目的流程步骤

    使用Vite构建Vue3项目的流程步骤

    在现代前端开发的世界中,Vue 3 已然成为了一个备受喜爱的框架,而 Vite 作为一个新兴的构建工具,以其极高的效率和简捷的配置方式席卷了开发者圈,本文我们将一步一步展示如何使用 Vite 构建一个 Vue 3 项目,从创建项目到最后的构建阶段,需要的朋友可以参考下
    2024-07-07
  • 基于vue+echarts 数据可视化大屏展示的方法示例

    基于vue+echarts 数据可视化大屏展示的方法示例

    这篇文章主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2020-03-03
  • 解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

    解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

    这篇文章主要介绍了解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue3 使用v-md-editor如何动态上传图片的方法实现

    Vue3 使用v-md-editor如何动态上传图片的方法实现

    本文主要介绍了Vue3 使用v-md-editor如何动态上传图片，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Vue项目中如何运用vuex的实战记录

    Vue项目中如何运用vuex的实战记录

    如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,下面这篇文章主要给大家介绍了关于Vue项目中如何运用vuex的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue中的baseurl如何配置

    Vue中的baseurl如何配置

    这篇文章主要介绍了Vue中的baseurl如何配置问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • 深入了解vue-router原理并实现一个小demo

    深入了解vue-router原理并实现一个小demo

    这篇文章主要为大家详细介绍了vue-router原理并实现一个小demo，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03

最新评论