精华内容
下载资源
问答
  • // 将this.pickerItem的数据存储入insuranceCode,需提前转化成string类型 localStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem)); sessionStorage.setItem("insuranceCode", ...
  • vue传参的几种方式

    千次阅读 2019-07-19 08:59:20
    从一个页面传参到另一个页面 路由传参 步骤:1.首先我在home.vue中定义 updatas(id):指事件 id:传的参数 updates(id){ this.$router.push({ path:'/world', name:'world', params:{ ...

    从一个页面传参到另一个页面

    路由传参

    步骤:1.首先我在home.vue中定义
    updatas(id):指事件
    id:传的参数

    updates(id){
                  this.$router.push({
                    path:'/world',
                    name:'world',
                    params:{
                     id : id
                    }
                  })
                }
    
    

    2.其次在另一个页面world.vue中

    export default {
        name: '',
        data () {
          return {
            id: ''
          }
        },
        created(){
           this.getParams()
        },
        methods: {
          getParams () {
            // 取到路由带过来的参数 
            var routerParams = this.$route.params.id
            // 将数据放在当前组件的数据内
            this.id = routerParams
          }
        },
        watch: {
        // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
          '$route': 'getParams'
        }
      }
    
    
    展开全文
  • vue全局变量存储几种方式

    千次阅读 2019-10-31 14:19:42
    1、全局变量专用模块(vue调用时要导入,不用this) 1:新建一个global.js,声明变量,采用export将其暴露出来。如 const mobileReg = /(^1[0|1|2|3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/ //手机号,11位纯数字 ...

    只可读的

    1、全局变量专用模块(vue调用时要导入,不用this)

    1:新建一个global.js,声明变量,采用export将其暴露出来。如

    const mobileReg = /(^1[0|1|2|3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/ //手机号,11位纯数字
    const passwordReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,15}$/ //密码,6-15位英文数字组合
    const chineseReg = /[u4e00-u9fa5]/ //中文
    const digitalReg = /^\d+(\.{1}\d+)?$/ //数字
    const hostReg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62}|(:[0-9]{1,4}))+\.?/ //域名
    const nickReg = /^[A-Za-z\d\u2E80-\u9FFF【】\[\]\(\)\-\,\,\?\?\.\。\;\:\:\;\\\、\“\”\‘\']+$/ //昵称,只能是中文/数字/英文字母 以及特殊符号
    const accountReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{5,20}$/ //账号,5-20位英文数字组合
    const emailReg = /^([a-zA-Z0-9_])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ //邮箱
    function getRandColor () {
      var tem = Math.round(Math.random() * colorListLength)
      return colorList[tem]
    }
    
    export { mobileReg, passwordReg, chineseReg, digitalReg, hostReg, nickReg, accountReg, emailReg ,getRandColor }
    

    调用~~.vue

     import { mobileReg } from "@/utils/global";
    
     if (!mobileReg.test(this.form.mobile)) {
    
         this.$toast("请输入正确的手机号");
    
         return false;
    
      }

    2、全局变量模块挂载到Vue.prototype里。(调用不需要导入,要用this)

     

    main.js
    
    import {loginBaseURL} from './utils/config'
    
    Vue.prototype.$baseImageUrl = baseImageUrl
    
    Vue.prototype.$appName = 'My App'
    
    
    ---.vue
    this.$baseImageUrl.value
    
    this.$appName

    可读改的

    1:在main.js的data中设置

    main.js定义
    
    new Vue({
        router,
        data: function(){
            return {
                ORDERID: 'PLDxxxxxx0001',
            }
        },
        render: h => h(App)
    }).$mount('#app');
    
    
    
    某个vue页面
    
    // 修改
    this.$root.ORDERID = "xxxxx"
    // 引用
    let orderId = this.$root.ORDERID 

    2:Cookie的使用(js-cookie插件)

    一、安装
    npm install js-cookie --save
    
    二、引用
    import Cookies from 'js-cookie'
    
    三、一般使用
    存到Cookie去
    1.Cookies.set('name', 'value');  
    Cookies.set('name', 'value', { expires: 7 });  
    Cookies.set('name', 'value', { expires: 7, path: '' });  
    
    2.在Cookie中取出
    Cookies.get('name'); 
    
    3.删除
    Cookies.remove('name');  
       
    

    3:vuex(状态管理模式,data共享)

                                             -------------------------------------------------------》看下篇

     

     

     

    展开全文
  • vue 组件中得几种传值方式

    千次阅读 2019-06-14 11:52:23
    vue中有多种组件,父组件、子组件、兄弟组件等,这些组件之间的传值方式也是不同得 1.父组件传值给子组件 这种传值方式比较简单,子组件只需用props将父组件传递过来的数据接收,即可使用 父组件代码: <p>这...

    vue中有多种组件,父组件、子组件、兄弟组件等,这些组件之间的传值方式也是不同得

    1.父组件传值给子组件

    这种传值方式比较简单,子组件只需用props将父组件传递过来的数据接收,即可使用
    父组件代码:

    <p>这是父组件</p>
    <input type="text" v-model="parentData">
    <Childrenfrt :parentData="parentData" ></Childrenfrt>
    

    子组件代码:

    props: {
        parentData: { type: String, required: true }
      },
    

    此时子组件中已经收到了父组件传来的数据

    2.子组件传值给父组件

    子组件传值给父组件需要通过一个自定义得方法,父组件监控这个方法来获得子组件传过来的值。子组件通过this.$emit将数据放在setData方法中,父组件通过监控setData这个方法将值取出。
    子组件代码:

    <p><input type="text" v-model="children1Data"></p>
    <p><button @click="sentChildData">点击传值给父组件</button></p>
    
    export default {
      name: 'Childrenfrt',
      data() {
        return{
          children1Data: ''
        }
      },
      methods: {
        sentChildData() {
          this.$emit('sentData', this.children1Data)
        }
      }
    }
    </script>
    

    父组件代码:

     <Childrenfrt  @sentData="sentData"></Childrenfrt>
    
    <script>
    export default {
      name: 'Index',
      data() {
        return{
          childData: ''
        }
      },
      methods: {
        sentData(val) {
          this.childData = val
        }
      }
    }
    </script>
    

    3.兄弟组件之间传值

    兄弟组件指的是平级之间的组件,他们中得传值方式比较多
    1.第一种是属于一种比较麻烦的方法,可以将值先传给父组件,再通过父组件传值给子组件得传值方式传值给另一个子组件
    2.可以使用Bus事件总线,创建一个中转站来进行传值。
    创建一个bus文件夹,在文件夹中新建index.js文件

    import Vue from 'vue'
    
    const Bus = new Vue()
    
    export default Bus
    
    

    在main.js中引用

    import Bus from './bus/Bus'
    
    Vue.prototype.$bus = Bus   // 在vue原型上添加$bus属性
    

    在方法中使用:通过 this.$ bus.$emit将值放入setDataToBrather中

     this.$bus.$emit('setDataToBrather', this.children1Data)   // 第一个参数是自己创建的方法名,第二个参数是要传递得数据
    

    取值得方法:通过$on将值取出,第一个参数还是之前传递的方法名,第二个参数是一个函数,函数中得参数就是传递得值,最后别忘了在beforeDestroy钩子函数中将这个线程关闭

    created() {
        this.$bus.$on('setDataToBrather', (val) => {
          this.ChildrenSecData = val
        })
      },
    beforeDestroy() {
        this.$bus.$off('setDataToBrather')
      }
    

    4. vuex传值

    vuex是一种状态管理模式,相当于将值都放在仓库里保管,想用时,直接从仓库里取出来就行了
    如下列

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        childData: ''
      },
      mutations: {
        setChildData (state, val) {
          state.childData = val
        }
      },
    })
    

    在vuex得state仓库中,创建了childData,给了一个空值,如果需要赋值,需要通过commit将值传给mutation,再由mutation赋给state中得childData
    当需要传值时:

     sentDataUseVuex() {
          this.$store.commit('setChildData', this.children1Data)   // 第一个参数时mutation中得方法名,第二个参数是需要传递得数据
        }
    

    当需要取值时:

    this.$store.state.childData
    

    这样就能将存储在vuex中得值取出来了。

    5.通过this.$attrs和this.$listeners

    6.通过this.$parent和this.$children

    7.通过provide和inject(不推荐使用,仅在自己编写底层库时可以使用)

    展开全文
  • vue组件传值的几种方式 1.Vuex Vuex是一种转为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的多有组件的状态,并以相应的规则保证状态以一种可预期的方式发生变化。 优点 解决了多层组件之间繁琐...

    vue组件传值的几种方式

    1.Vuex

    Vuex是一种转为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的多有组件的状态,并以相应的规则保证状态以一种可预期的方式发生变化。

    • 优点
      • 解决了多层组件之间繁琐的事件传播。
      • 解决了多组件依赖统同一状态的问题。
      • 单向数据流
      • 为Vue量身定做,学习成本不高
    • 缺点
      • 不能做数据持久化,刷新页面就要重制,要做数据持久化可以考虑使用localstorage。
      • 增加额外的代码体积,简单的业务场景不建议使用。

    2.EventBus

    通过共享一个vue实例,使用该实例的onon和emit实现书数据传递。

    // bus.js文件
    import Vue from 'vue'
    export default new Vue({})
    
    // component-a.js文件
    import bus from './bus.js'
    export default {
      created () {
        bus.$on('event-name', (preload) => {
          // ...
        })
      }
    }
    
    // component-b.js文件
    import bus from './bus.js'
    export default {
      created () {
        bus.$emit('event-name', preload)
      }
    }
    
    • 优点
      • 解决了多层组件之间繁琐的事件传播。
      • 使用原理十分简单,代码量少。
    • 缺点
      • 由于是都使用一个Vue实例,所以容易出现重复触发的情景,例如:
        1. 多人开发时,A、B两个人定义了同一个事件名。
        2. 两个页面都定义了同一个事件名,并且没有用$off销毁(常出现在路由切换时)。
        3. 在for出来的组件里注册。
      • 项目一大用这种方式管理事件会十分混乱,这时候建议用vuex。

    3.props和emit/emit/on

    父组件向子组件传值
    //子组件
    //通过props接收父组件传递的数据
    Vue.component('blog-post', {
      props: ['title'],
      template: '<h3>{{ title }}</h3>'
    })
    
    //父组件
    //父组件中注册子组件并传递数据
    <blog-post title="My journey with Vue"></blog-post>
    

    子组件向父组件传值
    //子组件中通过事件触发父组件自定义的事件on-change
    <span class="jump" @click="jumpPage(1)">1</span>
    <script>
    ...  
      methods:{
          jumpPage(page) {
            this.myCurrent_page = page;
    				this.$emit('on-change', this.myCurrent_page);
    			}
      }
    ...
    </script>
    
    //父组件
    <Page ref="pages" :pages="pages2" @on-change="pageSize2"></Page>
    <script>
    ...  
      methods:{
          pageSize2(page) {
            ...
    			}
      }
    ...
    </script>
    
    • 优点
      • 使用最为简单,也是父子组件传递最常见的方法。
      • Vue为给props提供了类型检查支持。
      • $emit不会修改到别的组件的同名事件,因为他只能触发父级的事件,这里和event-bus不同
    • 缺点
      • 单一组件层级一深需要逐层传递,会有很多不必要的代码量。
      • 不能解决了多组件依赖统同一状态的问题。

    4.provide/inject

    在父组件上通过provide提供给后代组件的数据/方法,在后代组件上通过inject来接收被注入的数据/方法。
    这种方式传递的属性是非响应式的,所以尽可能传递一些静态属性。

    //app.vue
    <template>
      <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
      </div>
    </template>
    
    export default {
      name: "App",
      components: {},
      provide(){
        return {
          reload: this.reload
        }
      },
      data(){
        return {
          isRouterAlive:true
        }
      },
      methods:{
        reload(){
          this.isRouterAlive = false;
          this.$nextTick(function(){
            this.isRouterAlive = true;
          })
        }
      }
    };
    </script>
    
    //子组件
    <script>
    export default {
    	inject: ["reload"],
      methods:{
      	todo(){
        	this.reload()
        }
      }
    }
    </script>
    
    
    • 优点
      • 不用像props一层层传递,可以跨层级传递。
    • 缺点
      • 用这种方式传递的属性是非响应式的,所以尽可能来传递一些静态属性。
      • 引用官网的话是它将你的应用以目前的组件组织方式耦合了起来,使重构变得更加困难。,我对这句话的理解是用了provide/inject你就要遵循它的组件组织方式,在项目的重构时如果要破坏这个组织方式会有额外的开发成本,其实event-bus也有这个问题。

    5.attrs/attrs/listeners

    • $attrs

    包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

    -父组件给子组件传值可以通过v-bind="KaTeX parse error: Expected '}', got 'EOF' at end of input: …值是以对象形式存在的,直接{{attrs}}进行使用,也可以通过this.$attrs打印出来

    • $listeners

    包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

    -父作用域上的所有订阅的事件都可在子组件中被触发
    -触发方式可以是emit()<br/>this.emit(事件名,参数)<br />-或者是this.listteners.事件名(参数)

    展开全文
  • vue几种缓存方式

    2021-02-10 22:39:07
    vu中实现缓存的几种方式: 前两种 * localStorage window.localStorage.setItem(key,value) window.localStorage.getItem(key) * sessionStorage window.sessionStorage.setItem(key,value) window....
  • 最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后创建一个名为...
  • vue组件之间通信有很多种方式,现介绍常用的几种 一 props & $emit 子组件先注册一个属性 把属性绑定到组件上放在父容器内, 指定要绑定传给子组件的的值 在子组件绑定 在父组件内接受触发 company_...
  • Vue.js 应用程序开发过程中常常需要处理组件传值的问题,下面详细列举几种常见的组件传值方法。 1. props 父组件代码: <template> <child-component title="子组件标题"></child-component&...
  • vue几种传值方式

    2019-02-25 08:19:04
    父向子传递数据: 子组件名称:header.vue 子组件:子组件用props接收父组件传的值。例如,写法:props:['logo'],跟data是同级关系,不用在data里定义 父组件:这边的父组件要引用子组件,a是 import HeaderDiv from ...
  • 组件通信方式 1. props 通过使用props将数据从父组件传递到子组件。 <!-- Parent Component --> <template> <div> <ChildComponent :msg="msg" /> </div> &l...
  • Vue 组件间通信几种方式(完整版)

    千次阅读 2019-05-27 17:36:12
    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系: ...本文总结了vue组件间通信的几种方式,如pro...
  • 爬虫中常用的几种数据持久化方式和Django与vue的交互 这里我们说到爬虫中数据持久化方式和Django与vue的交互 Django与vue的交互后端: CORS_ORIGIN_ALLOW_ALL = True #开启接口 'corsheaders.middleware....
  • 这篇文章就来总结一下vue项目中的几种通信方式。 一. 父子组件通信 1.props/$emit 父组件通过props向子组件传递数据,子组件通过$emit触发父组件的方法,从而实现子到父的通信 <!--父组件--> <temp...
  • Vue几种传值方式的分析

    千次阅读 2018-09-13 15:37:00
    在学习vue过程中自己总结了几种组件间传值的方式 1、路由传参 步骤: ①定义路由时加上参数props: true,在定义路由路径时要留有参数占位符: name『用法: to=”’路径/’+value”』 ②在跳转到...
  • Vue组件之间传递数据的五种方式

    千次阅读 2020-11-09 23:05:29
    Vue 组件之间数据传递的几种方式: 父组件向子组件传递数据,使用props属性;子组件向父组件中传递数据,在子组件中使用$emit派发事件,父组件中使用v-on 监听事件;缺点:组件嵌套层次多的话,传递数据比较麻烦。 ...
  • 点击上方蓝字关注「悲伤日记」 浮生有梦三千场 穷尽千里诗酒荒前言:六传值方式为:属性传值$refs$parent通知传值(广播传值)本地传值路由传值在介绍组件传值之前先明确三...
  • Vue项目开发中,会使用到很多组件,组件间的通信是Vue中的核心知识,掌握这个知识,会让你Vue开发中游刃有余。 父子间通信 父传子 <!-- father.vue --> <div :fatherData = 'fatherData'></div&...
  • 前言 Vue 组件间通信主要有 3 类通信:父子组件通信、隔代组件通信、兄弟组件通信。Github 地址props/$emit父子组件通信父组件向子组件传递数据是通过 props,子组件向父组件传值是通过 events($emit)(事件形式)...
  • 一、父组件向子组件传递数据(props) 第1:父组件需引入子组件 importnav2Childrenfrom'./nav2Children.vue' importzjOnefrom'./public/zjOne.vue' 组件引入:components: {'nav2C': nav2Children,'zjOne': ...
  • 经常使用vue + webpack搭建项目,但在请求某些json数据时存在跨域问题,此时有几种修改方法 1.修改后台header,但如果只是请求外部数据,是没法修改后台配置的 1 header('Access-Control-Allow-Origin:*');//...
  • 1.父 往 子组件上传递 props 父组件上写 <...子组件上使用 props接收 在vue实例中加上 1. props:{ parent:{type="String",default:""} } 2.props:["parent"] 2.子 往父亲上传递 emit 父组件...
  • 几种常见的Vue组件间的传参方式 Vue父子组件通讯的方法其实有很多,本文只是做一个总结,说说他们的优缺点,具体如何使用相关文档和网上大神已经总结的很多里,这里就不再说明。 1.Vuex 介绍 Vuex 是一个专为 Vue.js...
  • Vue 组件之间数据传递的几种方式: 父组件向子组件传递数据,使用props属性;子组件向父组件中传递数据,在子组件中使用$emit派发事件,父组件中使用v-on 监听事件;缺点:组件嵌套层次多的话,传递数据比较麻烦。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,609
精华内容 6,243
关键字:

vue存储数据几种方式

vue 订阅