当前位置:网站首页 > Vue.js开发 > 正文

vue父子组件的传值(vue父子组件传值ref)



在父组件中改变子组件里的数据

ref属性应用和传值

父组件

子组件

ref的基本应用:https://blog.csdn.net/wh/article/details/

一、父组件向子组件传递数据

在 Vue 中,可以使用 props 向子组件传递数据。

父组件部分:使用 v-bind 将值绑定上

子组件部分:

从父组件接收值,就需要使用 props: ['inputName']

在 props 中添加了元素之后,就不需要在 data 中再添加变量了。

总结:一个页面里,我们从服务器请求了很多数据,其中一些数据并不是页面的大组件来展示,而是让子组件来展示的。

所以需要父组件将数据传递给子组件(大组件请求数据,子组件用来展示)。

二、子组件向父组件传递数据

子组件主要通过事件 向父组件传递数据

1,子组件通过$emit()来触发事件

2,在父组件里,通过v-on自定义事件来监听

子组件部分:

首先声明一个事件方法 ,在事件里使用 $emit 来定义一个 要传递的方法,并带上值。

父组件部分:

在父组件中,声明一个方法childValClick,获取子组件传递的参数

https://www.cnblogs.com/wisewrong/p/6834270.html

总结:我们整个操作的过程还是在子组件中完成,但是之后的展示交给父组件,

   这样,就需要把子组件的值传递给父组件 。

三、兄弟组件传递数据

1,使用vuex来传值

2,定义一个“中转站”(新的vue实例)来传值

https://www.jb51.net/article/115151.htm

https://zhuanlan.zhihu.com/p/

到此这篇vue父子组件的传值(vue父子组件传值ref)的文章就介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • vue 怎么安装(vue怎么安装环境)2025-06-05 16:09:10
  • 埋点前端vue(前端埋点插件)2025-06-05 16:09:10
  • 跨域解决方案js(跨域解决方案jsonp)2025-06-05 16:09:10
  • ubuntu 20.04镜像(ubuntu18镜像)2025-06-05 16:09:10
  • 多级列表3.1怎么设置(多级列表1.1怎么设置)2025-06-05 16:09:10
  • swagger2.0返回值为hashmap(hashmap get方法返回值)2025-06-05 16:09:10
  • pcie5.0和pcie4.0区别显卡(pcie4.0和pcie3.0区别显卡)2025-06-05 16:09:10
  • ubuntu20.04镜像下载(ubuntu2004镜像iso下载)2025-06-05 16:09:10
  • redhat6.6安装教程(redhat6.0安装)2025-06-05 16:09:10
  • auto可以说明全局变量吗(autojs定义全局变量)2025-06-05 16:09:10
  • 全屏图片