• 售前

  • 售后

热门帖子
入门百科

vue传值方式的十二种方法总结

[复制链接]
孤钓客MZ2 显示全部楼层 发表于 2021-10-26 13:36:23 |阅读模式 打印 上一主题 下一主题
目录


  • 一.父传子转达
  • 二.子传父转达
  • 三.兄弟组件通讯(bus总线)
  • 四.ref/refs(父子组件通讯)
  • 五.Vuex通讯
  • 六.$parent
  • 七.sessionStorage传值
  • 八.路由传值
  • 九.祖传孙 $attrs
  • 十.孙传祖利用$listeners
  • 十一.promise传参
  • 十二.全局变量

一.父传子转达

(1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量
(2)在子组件中通过props来担当数据,props可以是数组也可以是对象,担当的数据可以直接利用 props: [“属性 名”] props:{属性名:数据范例}
代码示例:
  1. //父组件
  2. <template>
  3.   <div>
  4.     <i>父组件</i>
  5.     <!--页面使用-->
  6.     <son :data='name'></son>
  7.   </div>
  8. </template>
  9. <script>
  10. import son from "./son.vue";//导入父组件
  11. export default {
  12.   components: { son },//注册组件
  13.   name: "父组件",
  14.   data() {
  15.     return {
  16.       name: "Frazier", //父组件定义变量
  17.     };
  18.   },
  19. };
  20. </script>
复制代码
  1. //子组件
  2. <template>
  3.   <div>{{data}}</div>
  4. </template>
  5. <script>
  6. export default {
  7. components: { },
  8.   name: '子组件',
  9.   props:["data"],
  10. };
  11. </script>
复制代码
二.子传父转达

(1)在父组件的子组件标签上自界说一个变乱,然后调用必要的方法 ​
(2)在子组件的方法中通过 this.$emit(“变乱”)来触发在父组件中界说的变乱,数据是以参数的形式进行转达的
代码示例:
  1. //父组件
  2. <template>
  3.   <div>
  4.     <i>父组件</i>
  5.     <!--页面使用-->
  6.     <son @lcclick="lcclick"></son>//自定义一个事件
  7.   </div>
  8. </template>
  9. <script>
  10. import son from "./son.vue"; //导入父组件
  11. export default {
  12.   components: { son }, //注册组件
  13.   name: "父组件",
  14.   data() {
  15.     return {};
  16.   },
  17.   methods: {
  18.     lcclick(){
  19.       alert('子传父')
  20.     }
  21.   },
  22. };
  23. </script>
复制代码
  1. //子组件
  2. <template>
  3.   <div>
  4.     <button @click="lcalter">点我</button>
  5.   </div>
  6. </template>
  7. <script>
  8. export default {
  9. components: { },
  10.   name: '子组件',
  11.   methods: {
  12.     lcalter(){
  13.       this.$emit('lcclick')//通过emit来触发事件
  14.     }
  15.   },
  16. };
  17. </script>
复制代码
三.兄弟组件通讯(bus总线)

(1)在src中新建一个Bus.js的文件,然后导出一个空的vue实例 ​
(2)在传输数据的一方引入Bus.js 然后通过Bus. e m i t ( “ 事 件 名 ” , " 参 数 " ) 来 来 派 发 事 件 , 数 据 是 以 emit(“变乱名”,"参数")来来派发变乱,数据是以 emit(“变乱名”,"参数")来来派发变乱,数据是以emit()的参 数形式来转达 ​
(3)在担当的数据的一方 引入 Bus.js 然后通过 Bus.$on(“变乱名”,(data)=>{data是担当的数据})

图片示例:







四.ref/refs(父子组件通讯)

(1)ref 如果在平常的 DOM 元素上利用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,
(2)可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种
代码示例:
  1. //父组件
  2. <template>
  3.   <div>
  4.     <button @click="sayHello">sayHello</button>
  5.     <child ref="childForRef"></child>
  6.   </div>
  7. </template>
  8. <script>
  9. import child from './child.vue'
  10.   export default {
  11.     components: { child },
  12.     data () {
  13.       return {
  14.         childForRef: null,
  15.       }
  16.     },
  17.     mounted() {
  18.       this.childForRef = this.$refs.childForRef;
  19.       console.log(this.childForRef.name);
  20.     },
  21.     methods: {
  22.       sayHello() {
  23.         this.childForRef.sayHello()
  24.       }
  25.     }
  26.   }
  27. </script>
复制代码
  1. //子组件
  2. <template>
  3.   <div>child 的内容</div>
  4. </template>
  5. <script>
  6. export default {
  7.   data () {
  8.     return {
  9.       name: '我是 child',
  10.     }
  11.   },
  12.   methods: {
  13.     sayHello () {
  14.       console.log('hello');
  15.       alert('hello');
  16.     }
  17.   }
  18. }
  19. </script>
复制代码
五.Vuex通讯

组件通过 dispatch 到 actions,actions 是异步操纵,再 actions中通过 commit 到 mutations,mutations 再通过逻辑操纵改变 state,从而同步到组件,更新其数据状态
代码示例:
  1. //父组件
  2. template>
  3.   <div id="app">
  4.     <ChildA/>
  5.     <ChildB/>
  6.   </div>
  7. </template>
  8. <script>
  9.   import ChildA from './ChildA' // 导入A组件
  10.   import ChildB from './ChildB' // 导入B组件
  11.   export default {
  12.     components: {ChildA, ChildB} // 注册组件
  13.   }
  14. </script>
复制代码
  1. //子组件A
  2. <template>
  3. <div id="childA">
  4.    <h1>我是A组件</h1>
  5.    <button @click="transform">点我让B组件接收到数据</button>
  6.    <p>因为点了B,所以信息发生了变化:{{BMessage}}</p>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11.    data() {
  12.      return {
  13.        AMessage: 'Hello,B组件,我是A组件'
  14.      }
  15.    },
  16.    computed: {
  17.      BMessage() {
  18.        // 这里存储从store里获取的B组件的数据
  19.        return this.$store.state.BMsg
  20.      }
  21.    },
  22.    methods: {
  23.      transform() {
  24.        // 触发receiveAMsg,将A组件的数据存放到store里去
  25.        this.$store.commit('receiveAMsg', {
  26.          AMsg: this.AMessage
  27.        })
  28.      }
  29.    }
  30. }
  31. </script>
复制代码
  1. //子组件B
  2. <template>
  3. <div id="childB">
  4.    <h1>我是B组件</h1>
  5.    <button @click="transform">点我让A组件接收到数据</button>
  6.    <p>点了A,我的信息发生了变化:{{AMessage}}</p>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11.    data() {
  12.      return {
  13.        BMessage: 'Hello,A组件,我是B组件'
  14.      }
  15.    },
  16.    computed: {
  17.      AMessage() {
  18.        // 这里存储从store里获取的A组件的数据
  19.        return this.$store.state.AMsg
  20.      }
  21.    },
  22.    methods: {
  23.      transform() {
  24.        // 触发receiveBMsg,将B组件的数据存放到store里去
  25.        this.$store.commit('receiveBMsg', {
  26.          BMsg: this.BMessage
  27.        })
  28.      }
  29.    }
  30. }
  31. </script>
复制代码
  1. //vuex
  2. import Vue from 'vue'
  3. import Vuex from 'vuex'
  4. Vue.use(Vuex)
  5. const state = {
  6.    AMsg: '',
  7.    BMsg: ''
  8. }
  9. const mutations = {
  10.    receiveAMsg(state, payload) {
  11.      // 将A组件的数据存放于state
  12.      state.AMsg = payload.AMsg
  13.    },
  14.    receiveBMsg(state, payload) {
  15.      // 将B组件的数据存放于state
  16.      state.BMsg = payload.BMsg
  17.    }
  18. }
  19. export default new Vuex.Store({
  20.    state,
  21.    mutations
  22. })
复制代码
六.$parent

通过parent可以获父组件实例 ,然 后通过这个实例就可以访问父组件的属 性和方法 ,它另有一个兄弟parent可以获父组件实例,然后通过这个实例就可以访问父组件的属性和方法,它另有一个兄弟parent可以获父组件实例,然后通过这个实例就可以访问父组件的属性和方法,它另有一个兄弟root,可以获取根组件实例。
代码示例:
  1. // 获父组件的数据
  2. this.$parent.foo
  3. // 写入父组件的数据
  4. this.$parent.foo = 2
  5. // 访问父组件的计算属性
  6. this.$parent.bar
  7. // 调用父组件的方法
  8. this.$parent.baz()
  9. //在子组件传给父组件例子中,可以使用this.$parent.getNum(100)传值给父组件。
复制代码
七.sessionStorage传值

sessionStorage 是欣赏器的全局对象,存在它里面的数据会在页面关闭时扫除 。运用这个特性,我们可以在所有页面共享一份数据。
代码示例:
  1. // 保存数据到 sessionStorage
  2. sessionStorage.setItem('key', 'value');
  3. // 从 sessionStorage 获取数据
  4. let data = sessionStorage.getItem('key');
  5. // 从 sessionStorage 删除保存的数据
  6. sessionStorage.removeItem('key');
  7. // 从 sessionStorage 删除所有保存的数据
  8. sessionStorage.clear();
复制代码
注意:里面存的是键值对,只能是字符串范例,如果要存对象的话,必要利用 let objStr = JSON.stringify(obj) 转成字符串然后再存储(利用的时间 let obj = JSON.parse(objStr) 剖析为对象)。
保举一个库 good-storage ,它封装了sessionStorage ,可以直接用它的API存对象
  1. //localStorage
  2. storage.set(key,val)
  3. storage.get(key, def)
  4. //sessionStorage
  5. storage.session.set(key, val)
  6. storage.session.get(key, val)
复制代码
八.路由传值

利用问号传值
A页面跳转B页面时利用 this. r o u t e r . p u s h ( ' / B ? n a m e = d a n s e e k ' ) B 页 面 可 以 使 用 t h i s . router.push('/B?name=danseek') B页面可以利用 this. router.push('/B?name=danseek')B页面可以利用this.route.query.name 来获取A页面传过来的值
上面要注意router和route的区别
利用冒号传值
设置如下路由:
  1. {
  2.     path: '/b/:name',
  3.     name: 'b',
  4.     component: () => import( '../views/B.vue')
  5. },
复制代码
在B页面可以通过 this.$route.params.name 来获取路由传入的name的值
利用父子组件传值
由于router-view本身也是一个组件,所以我们也可以利用父子组件传值方式传值,然后在对应的子页面里加上props,由于type更新后没有革新路由,所以不能直接在子页面的mounted钩子里直接获取最新type的值,而要利用watch
  1. <router-view :type="type"></router-view>
  2. // 子页面
  3. props: ['type']
  4. watch: {
  5.        type(){
  6.            // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
  7.        },
  8. },
复制代码
九.祖传孙 $attrs

正常情况下必要借助父亲的props作为中间过渡,但是这样在父亲组件就会多了一些跟父组件业务无关的属性,耦合度高,借助$attrs可以简化些,而且祖跟孙都无需做修改
祖组件:
  1. <template>
  2.     <section>
  3.         <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
  4.     </section>
  5. </template>
  6. <script>
  7.     import Parent from './Parent'
  8.     export default {
  9.         name: "GrandParent",
  10.         components: {
  11.           Parent
  12.         },
  13.         data() {
  14.             return {}
  15.         },
  16.         methods: {
  17.           sayKnow(val){
  18.             console.log(val)
  19.           }
  20.         },
  21.         mounted() {
  22.         }
  23.     }
  24. </script>
复制代码
父组件
  1. <template>
  2.   <section>
  3.     <p>父组件收到</p>
  4.     <p>祖父的名字:{{name}}</p>
  5.     <children v-bind="$attrs" v-on="$listeners"></children>
  6.   </section>
  7. </template>
  8. <script>
  9.   import Children from './Children'
  10.   export default {
  11.     name: "Parent",
  12.     components: {
  13.       Children
  14.     },
  15.     // 父组件接收了name,所以name值是不会传到子组件的
  16.     props:['name'],
  17.     data() {
  18.       return {}
  19.     },
  20.     methods: {},
  21.     mounted() {
  22.     }
  23.   }
  24. </script>
复制代码
子组件
  1. <template>
  2.   <section>
  3.     <p>子组件收到</p>
  4.     <p>祖父的名字:{{name}}</p>
  5.     <p>祖父的性别:{{sex}}</p>
  6.     <p>祖父的年龄:{{age}}</p>
  7.     <p>祖父的爱好:{{hobby}}</p>
  8.     <button @click="sayKnow">我知道啦</button>
  9.   </section>
  10. </template>
  11. <script>
  12.   export default {
  13.     name: "Children",
  14.     components: {},
  15.     // 由于父组件已经接收了name属性,所以name不会传到子组件了
  16.     props:['sex','age','hobby','name'],
  17.     data() {
  18.       return {}
  19.     },
  20.     methods: {
  21.       sayKnow(){
  22.         this.$emit('sayKnow','我知道啦')
  23.       }
  24.     },
  25.     mounted() {
  26.     }
  27.   }
  28. </script>
复制代码
十.孙传祖利用$listeners

文字内容同第九个
祖组件
  1. <template>
  2.   <div id="app">
  3.     <children-one @eventOne="eventOne"></children-one>
  4.     {{ msg }}
  5.   </div>
  6. </template>
  7. <script>
  8. import ChildrenOne from '../src/components/children.vue'
  9. export default {
  10.   name: 'App',
  11.   components: {
  12.     ChildrenOne,
  13.   },
  14.   data() {
  15.     return {
  16.       msg: ''
  17.     }
  18.   },
  19.   methods: {
  20.     eventOne(value) {
  21.       this.msg = value
  22.     }
  23.   }
  24. }
  25. </script>
复制代码
父组件
  1. <template>
  2.   <div>
  3.     <children-two v-on="$listeners"></children-two>
  4.   </div>
  5. </template>
  6. <script>
  7. import ChildrenTwo from './childrenTwo.vue'
  8. export default {
  9.   name: 'childrenOne',
  10.   components: {
  11.     ChildrenTwo
  12.   }
  13. }
  14. </script>
复制代码
子组件
  1. <template>
  2.   <div>
  3.     <button @click="setMsg">点击传给祖父</button>
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   name: 'children',
  9.   methods: {
  10.     setMsg() {
  11.       this.$emit('eventOne', '123')
  12.     }
  13.   }
  14. }
  15. </script>
复制代码
十一.promise传参

promise 中 resolve 怎样转达多个参数
  1. //类似与这样使用,但实际上后面两个参数无法获取
  2. promise = new Promise((resolve,reject)=>{
  3.     let a = 1
  4.     let b = 2
  5.     let c = 3
  6.     resolve(a,b,c)
  7. })
  8. promise.then((a,b,c)=>{
  9.     console.log(a,b,c)
  10. })
复制代码
resolve() 只能担当并处理一个参数,多余的参数会被忽略掉。
如果想多个用数组,大概对象方式。。
数组
  1. promise = new Promise((resolve,reject)=>{
  2.     resolve([1,2,3])
  3. })
  4. promise.then((arr)=>{
  5.     console.log(arr[0],arr[1],arr[2])
  6. })
复制代码
对象
  1. promise = new Promise((resolve,reject)=>{
  2.     resolve({a:1,b:2,c:3})
  3. })
  4. promise.then(obj=>{
  5.     console.log(obj.a,obj.b,obj.c)
  6. })
复制代码
十二.全局变量

界说一个全局变量,在有值的组件直接赋值,在必要的组件内直接利用就可以了,详细的话看我这篇博客就可以,
博客链接点击就好 全局变量 篇
到此这篇关于vue传值方式的十二种方法总结的文章就介绍到这了,更多干系vue传值方式内容请搜索脚本之家从前的文章或继续欣赏下面的干系文章盼望大家以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作