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

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

一.父传子传递

(1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量
(2)在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props: [“属性 名”] props:{属性名:数据类型}
代码示例:

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son :data='name'></son>
  </div>
</template>

<script>
import son from "./son.vue";//导入父组件
export default {
  components: { son },//注册组件
  name: "父组件",
  data() {
    return {
      name: "Frazier", //父组件定义变量
    };
  },
};
</script>
//子组件
<template>
  <div>{{data}}</div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  props:["data"],
};
</script>

二.子传父传递

(1)在父组件的子组件标签上自定义一个事件,然后调用需要的方法 ​
(2)在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件,数据是以参数的形式进行传递的
代码示例:

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son @lcclick="lcclick"></son>//自定义一个事件
  </div>
</template>

<script>
import son from "./son.vue"; //导入父组件
export default {
  components: { son }, //注册组件
  name: "父组件",
  data() {
    return {};
  },
  methods: {
    lcclick(){
      alert('子传父')
    }
  },
};
</script>
//子组件
<template>
  <div>
    <button @click="lcalter">点我</button>
  </div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  methods: {
    lcalter(){
      this.$emit('lcclick')//通过emit来触发事件
    }
  },
};
</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)可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种
代码示例:

//父组件
<template>
  <div>
    <button @click="sayHello">sayHello</button>
    <child ref="childForRef"></child>
  </div>
</template>
<script>
import child from './child.vue'
  export default {
    components: { child },
    data () {
      return {
        childForRef: null,
      }
    },
    mounted() {
      this.childForRef = this.$refs.childForRef;
      console.log(this.childForRef.name);
    },
    methods: {
      sayHello() {
        this.childForRef.sayHello()
      }
    }
  }
</script>
//子组件
<template>
  <div>child 的内容</div>
</template>
<script>
export default {
  data () {
    return {
      name: '我是 child',
    }
  },
  methods: {
    sayHello () {
      console.log('hello');
      alert('hello');
    }
  }
}
</script>

五.Vuex通信

组件通过 dispatch 到 actions,actions 是异步操作,再 actions中通过 commit 到 mutations,mutations 再通过逻辑操作改变 state,从而同步到组件,更新其数据状态
代码示例:

//父组件
template>
  <div id="app">
    <ChildA/>
    <ChildB/>
  </div>
</template>
<script>
  import ChildA from './ChildA' // 导入A组件
  import ChildB from './ChildB' // 导入B组件
  export default {
    components: {ChildA, ChildB} // 注册组件
  }
</script>
//子组件A
<template>
 <div id="childA">
   <h1>我是A组件</h1>
   <button @click="transform">点我让B组件接收到数据</button>
   <p>因为点了B,所以信息发生了变化:{{BMessage}}</p>
 </div>
</template>
<script>
 export default {
   data() {
     return {
       AMessage: 'Hello,B组件,我是A组件'
     }
   },
   computed: {
     BMessage() {
       // 这里存储从store里获取的B组件的数据
       return this.$store.state.BMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveAMsg,将A组件的数据存放到store里去
       this.$store.commit('receiveAMsg', {
         AMsg: this.AMessage
       })
     }
   }
 }
</script>
//子组件B
<template>
 <div id="childB">
   <h1>我是B组件</h1>
   <button @click="transform">点我让A组件接收到数据</button>
   <p>点了A,我的信息发生了变化:{{AMessage}}</p>
 </div>
</template>

<script>
 export default {
   data() {
     return {
       BMessage: 'Hello,A组件,我是B组件'
     }
   },
   computed: {
     AMessage() {
       // 这里存储从store里获取的A组件的数据
       return this.$store.state.AMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveBMsg,将B组件的数据存放到store里去
       this.$store.commit('receiveBMsg', {
         BMsg: this.BMessage
       })
     }
   }
 }
</script>
//vuex
import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 const state = {
   AMsg: '',
   BMsg: ''
 }

 const mutations = {
   receiveAMsg(state, payload) {
     // 将A组件的数据存放于state
     state.AMsg = payload.AMsg
   },
   receiveBMsg(state, payload) {
     // 将B组件的数据存放于state
     state.BMsg = payload.BMsg
   }
 }

 export default new Vuex.Store({
   state,
   mutations
 })

六.$parent

通过parent可以获父组件实例 ,然 后通过这个实例就可以访问父组件的属 性和方法 ,它还有一个兄弟parent可以获父组件实例,然后通过这个实例就可以访问父组件的属性和方法,它还有一个兄弟parent可以获父组件实例,然后通过这个实例就可以访问父组件的属性和方法,它还有一个兄弟root,可以获取根组件实例。
代码示例:

// 获父组件的数据
this.$parent.foo

// 写入父组件的数据
this.$parent.foo = 2

// 访问父组件的计算属性
this.$parent.bar

// 调用父组件的方法
this.$parent.baz()

//在子组件传给父组件例子中,可以使用this.$parent.getNum(100)传值给父组件。

七.sessionStorage传值

sessionStorage 是浏览器的全局对象,存在它里面的数据会在页面关闭时清除 。运用这个特性,我们可以在所有页面共享一份数据。
代码示例:

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

注意:里面存的是键值对,只能是字符串类型,如果要存对象的话,需要使用 let objStr = JSON.stringify(obj) 转成字符串然后再存储(使用的时候 let obj = JSON.parse(objStr) 解析为对象)。
推荐一个库 good-storage ,它封装了sessionStorage ,可以直接用它的API存对象

//localStorage
 storage.set(key,val)
 storage.get(key, def)
//sessionStorage
 storage.session.set(key, val)
 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的区别
使用冒号传值
配置如下路由:

{
    path: '/b/:name',
    name: 'b',
    component: () => import( '../views/B.vue')
 },

在B页面可以通过 this.$route.params.name 来获取路由传入的name的值

使用父子组件传值
由于router-view本身也是一个组件,所以我们也可以使用父子组件传值方式传值,然后在对应的子页面里加上props,因为type更新后没有刷新路由,所以不能直接在子页面的mounted钩子里直接获取最新type的值,而要使用watch

<router-view :type="type"></router-view>

// 子页面
props: ['type']
watch: {
       type(){
           // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
       },
},

九.祖传孙 $attrs

正常情况下需要借助父亲的props作为中间过渡,但是这样在父亲组件就会多了一些跟父组件业务无关的属性,耦合度高,借助$attrs可以简化些,而且祖跟孙都无需做修改
祖组件:

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>

<script>
    import Parent from './Parent'
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>

父组件

<template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字:{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>

<script>
  import Children from './Children'

  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:['name'],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>

子组件

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字:{{name}}</p>
    <p>祖父的性别:{{sex}}</p>
    <p>祖父的年龄:{{age}}</p>
    <p>祖父的爱好:{{hobby}}</p>

    <button @click="sayKnow">我知道啦</button>
  </section>
</template>

<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性,所以name不会传到子组件了
    props:['sex','age','hobby','name'],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit('sayKnow','我知道啦')
      }
    },
    mounted() {
    }
  }
</script>

十.孙传祖使用$listeners

文字内容同第九个

祖组件

<template>
  <div id="app">
    <children-one @eventOne="eventOne"></children-one>
    {{ msg }}
  </div>
</template>
<script>
import ChildrenOne from '../src/components/children.vue'
export default {
  name: 'App',
  components: {
    ChildrenOne,
  },
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    eventOne(value) {
      this.msg = value
    }
  }
}
</script>

父组件

<template>
  <div>
    <children-two v-on="$listeners"></children-two>
  </div>
</template>

<script>
import ChildrenTwo from './childrenTwo.vue'

export default {
  name: 'childrenOne',
  components: {
    ChildrenTwo
  }
}
</script>

子组件

<template>
  <div>
    <button @click="setMsg">点击传给祖父</button>
  </div>
</template>

<script>
export default {
  name: 'children',
  methods: {
    setMsg() {
      this.$emit('eventOne', '123')
    }
  }
}
</script>

十一.promise传参

promise 中 resolve 如何传递多个参数

//类似与这样使用,但实际上后面两个参数无法获取
promise = new Promise((resolve,reject)=>{
    let a = 1
    let b = 2
    let c = 3
    resolve(a,b,c)
})
promise.then((a,b,c)=>{
    console.log(a,b,c)
})

resolve() 只能接受并处理一个参数,多余的参数会被忽略掉。
如果想多个用数组,或者对象方式。。
数组

promise = new Promise((resolve,reject)=>{
    resolve([1,2,3])
})
promise.then((arr)=>{
    console.log(arr[0],arr[1],arr[2])
})

对象

promise = new Promise((resolve,reject)=>{
    resolve({a:1,b:2,c:3})
})
promise.then(obj=>{
    console.log(obj.a,obj.b,obj.c)
})

十二.全局变量

定义一个全局变量,在有值的组件直接赋值,在需要的组件内直接使用就可以了,具体的话看我这篇博客就可以,
博客链接点击就好 全局变量 篇

到此这篇关于vue传值方式的十二种方法总结的文章就介绍到这了,更多相关vue传值方式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解Vue的七种传值方式

    1,父传子 子组件中定义props字段,类型为数组(如果需要限制字段值类型,也可以定义为对象的形式).如下图的例子,父组件挂载子组件HelloWorld,在组件标签上给title赋值,子组件HelloWorld定义props,里面有一个值是title,这样子组件就可以使用父组件的值了. 父组件 <template> <div> <HelloWorld :title="msg" /> </div> </template> <

  • vue中各种通信传值方式总结

    1.路由通信传值 路由通信是通过路由跳转用query把参数带过去,也是vue常用的通信手段. 例子:创建并在路由注册一个组件Head <template> <div id="head"> <button @click="handleChange">clickMe</button> //给按钮绑定点击事件 </div> </template> <script> export defau

  • vue2.0组件之间传值、通信的多种方式(干货)

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.这次我们就来聊一聊vue2.0组件之间传值.通信的多种方式. 一.通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.

  • 详解vuejs几种不同组件(页面)间传值的方式

    在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值. 一.路由传值 路由对象如下图所示: 在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-link>标签 this.$router.push({ name: 'routePage', query/params: { routeParams: params } }) 需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题. 这样使用起来很方便,但url会

  • vue组件传值的实现方式小结【三种方式】

    本文实例讲述了vue组件传值的实现方式.分享给大家供大家参考,具体如下: 前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值 引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: 下面我们就开始用代码(一言不合就上代码)详细的介绍vue组件传值的三种方式 1.父传子 子组件的代码: <template> <div id="container"&

  • Vue常用传值方式、父传子、子传父及非父子实例分析

    本文实例讲述了Vue常用传值方式.父传子.子传父及非父子.分享给大家供大家参考,具体如下: 父组件向子组件传值是利用props 子组件中的注意事项:props:['greetMsg'],注意props后面是[]数组可以接收多个值,不是{}. 且此处的greetMsg用greet-msg会报错,记住需用驼峰法命名 非父子组件进行传值 非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中 间仓库来传值,不然路由组件之间达不到传值的效果. import Vue from 'vue' e

  • Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

    Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况.当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍.我先给大家介绍Vue开发中常用的三种传值方式. Vue常用的三种传值方式有: •父传子 •子传父 •非父子传值 引

  • vue 组件间的通信之子组件向父组件传值的方式

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件data中的name属性: 在<com-b :name="name"></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写. 在子组件定义部分里添加选项,值是个字符串数组 props:['name'],将上边红色的属性名称写在这里: 之后就

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

    目录 一.父传子传递 二.子传父传递 三.兄弟组件通信(bus总线) 四.ref/refs(父子组件通信) 五.Vuex通信 六.$parent 七.sessionStorage传值 八.路由传值 九.祖传孙 $attrs 十.孙传祖使用$listeners 十一.promise传参 十二.全局变量 一.父传子传递 (1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量 (2)在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props: ["属性

  • vue debug 二种方法

    console.log多了比较烦,用debug就比较清晰了. 可以快速履清代码运行的先后顺序,验证自己的想法是否正确,可以清楚的了解到变量的内容,不用在console.log了. 一,vue devtools 1,chrome应用商店安装vue devtools扩展,并打开vue devtolls扩展 2,启动vue,npm run dev 3,chrome中访问vue网址,打开开发者工具,导行会多出vue,如下图 vue devtools vue devtools,对于数据展示,是非常清楚的.

  • vue 动态创建组件的两种方法

    Vue动态创建组件实例并挂载到body 方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(c

  • vue实现组件通信的八种方法实例

    目录 1.props 父组件--->子组件通信 2.$emit 子组件--->父组件传递 3.bus(事件总线) 兄弟组件通信 4.$parent.$children 直接访问组件实例 5.$refs 6.provide/inject(提供/注入) 多组件或深层次组件通信 7.slot(slot-scope作用域插槽) 子元素-->父元素(类似于通信) 8.vuex状态管理 总结 对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结 1.props

  • 使vue实现jQuery调用的两种方法

    引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按需引入),也让许多新手前端开发人员逐步绕过对jQuery的学习.jQuery需要记忆的内容颇多,这也让jQuery变得不那么受新入行开发者喜欢. 在前端工程化的需求没有普及的时候,许多公司使用的是后端渲染技术,为了能够实现友好的前端交互效果,需要写好大量的jQuery.JavaScript和CSS,

  • vue实现行列转换的一种方法

    行列转换是一个老生常谈的问题,这几天逛知乎有遇到了这个问题.一个前端说,拿到的数据是单列的需要做转换才能够绑定,折腾了好久才搞定,还说这个应该后端直接出数据,不应该让前端折腾. 这个嘛,行列转换在后端也不是很好解决的问题,而且还有一个性能的问题,综合考虑,我还是觉得应该由前端进行行列转换.光说不练假把式,所以拿出来代码仅作为抛砖引玉,供大家参考一下,如果有更好的方法,欢迎一起来探讨. 1.模板设计. <div id="app"> <table class="

  • Vue 实现双向绑定的四种方法

    1. v-model 指令 <input v-model="text" /> 上例不过是一个语法糖,展开来是: <input :value="text" @input="e => text = e.target.value" /> 2. .sync 修饰符 <my-dialog :visible.sync="dialogVisible" /> 这也是一个语法糖,剥开来是: <my

  • vue项目刷新当前页面的三种方法

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本

  • vue中使用WX-JSSDK的两种方法(推荐)

    公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题.本人也是第一次开发微信公众号,在网上看了很多篇博客,最终选定了两种方法,并且亲测有效. 一.通过全局,在router.afterEach中定义 1.首先通过yarn add weixin-js-sdk/ npm i weixin-js-sdk 2.将微信jsdk挂载到全局上 在utils目录下新建WechatPlugin.js WechatPlugin.js import wx from 'we

  • java发送url请求获取返回值的二种方法

    下面提供二种方法会使用java发送url请求,并获取服务器返回的值 第一种方法: 复制代码 代码如下: import org.apache.http.HttpEntity;import org.apache.http.HttpResponse;import org.apache.http.NameValuePair;import org.apache.http.client.HttpClient;import org.apache.http.client.entity.UrlEncodedFor

随机推荐