vue 组件传值

vue 组件传值分为 父传子、子传父、非父子传值

父组件访问子组件的值

    子组件中通过this.$emit(‘childName‘,childData)  父组件通过v-on监听一个事件  @childName = "childData"    methods:{ childData (data) { console.log(data) } }

    父组件通过 ref 获取子组件的值 在子组件通过ref,在父组件中通过this.$refs.refsName访问子组件中的值

       注意:当 ref 和 v-for 一起使用的时候,得到的引用将会是一个包含了对应数据源的这些子组件的数组。就是得到一个数组对象嘛  下图是官网的建议

    通过 provide 和 inject

    父组件provide:{ name:"Gatter" }  子组件 inject:[name]     下图是官网的建议

子组件访问父组件的值

    在父组件v-bind一个属性,子组件props接收 可设定传过的数据类型

    

    子组件中通过this.$parent来操作父组件中的值(不建议,老老实实用props不好吗)下图是官网给出的建议

  

    

原文地址:https://www.cnblogs.com/TreeCTJ/p/11391204.html

时间: 2024-10-09 00:23:53

vue 组件传值的相关文章

vue 组件传值踩坑日记 1

今天在用平时很少用到的传值方式,是V2.4以后新加入属性$attrs $listener 以及inheritAttrs. 总结:这样形式的代码适合套娃模式的组件传递,却不适合兄弟组件的传值,那样的传值方式,需要创建一个事件总线,说白了就是新new一个空的vue,详见,我的第二篇日志<vue 组件传值踩坑日记 2> 废话不多说,直接上代码,大家可以边看注释边测试一下效果吧 <!DOCTYPE html> <html lang="en"> <hea

vue组件传值

如何实现父子组件之间的传值 1.父组件向子组件传值 1.在子组件中设置props:['commentId'] //子组件用来接收父组件传递过来值的属性名称 2.在父组件的自定义子组件标签中设置<subComponent :commentId="this.$route.params.photoId"></subComponent>//父组件传递值给子组件 2.子组件向父组件传值 1.在父组件的自定义标签中设置一个自定义函数<subComponent v-on

Vue组件传值、refs、插槽

一.组件传值 1.父组件向子组件传值 因为子组件本身不能拿到父组件的data数据来用,所以在子组件里用props接收,props是一个数组 父组件向子组件传值 <div id="app"> <com1 :parent="msg" :parentarr="arr"></com1> </div> <template id="com"> <div> {{pare

vue组件传值之父传子

1.父组件给子组件传值  home父组件  header子组件  关键字props home代码 <template> <div> <v-header :title="title" :run="run"></v-header> <h2>我是home组件</h2> </div> </template> <script> import Header from '.

vue 组件传值踩坑日记 2

这里介绍一下适合兄弟组件和父子,祖孙组件之间的传值方式-事件总线,废话不多说,直接上代码 总结:说白了这东西就是一种发布订阅的模式,发数据的一方用$emit发,各个接听方用$on接受对应key的事件,on的时候,就选择在DOM挂在完毕以后进行监听,通过这样的事件去修改数据,完成传递工作,感兴趣的同学可以吧这个代码拿下去直接调试运行一下看看 <!DOCTYPE html> <html lang="en"> <head> <meta charset

【vue组件之间互相传值:父传子,子传父】

今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props,然后创建一个名为message的属性 3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值 4.保存修改的文件,查看浏览器 5.我们依然可以对message的值进行v-bind动态绑定 此

vue 中父子组件传值:props和$emit

1 父组件向子组件传值:通过props数组: //父组件 App.vue <template> <div id="app"> <hello mes-father="爸爸无可奉告"></hello> </div> </template> //子组件Hello.vue <template> <div class="hello"> <p>{{me

vue知识总结第一篇vue组件的定义以及父子组件的传值。

vue中是一个.vue结尾的vue文件其中包括<template>标签里边写html,而react是在render函数中..script用来写js,style中用来写css.那么我们来看看vue是怎么写的吧 子组件中 1,用export default 导出子组件,其中标红的是用来父子组件传值的this.$emit('reChild')指发送一个自定事件到父组件中,父组件中只要在引入这个子组件标签的时候v-on:reChild="rece"其中rece为父组件中method

Vue父子组件和非父子组件传值问题

父组件跟子组件之间的传值(具体参考lonzhubb商城) 1.父组件传值给子组件形式,ifshop是要传的对象,右边ifshop代表要传的这个对象的数据 <v-select  :ifshop="ifshop"  :clickType="clickType" @close="close" @addShop="sureAddShop"></v-select> 2.子组件接收父组件的数据用props prop