精华内容
下载资源
问答
  • 参考文章...Vue.prototype.$EventBus = new Vue(); 要传值的页面函数 this.$EventBus.$emit('incremented', fileList.time); 接收传值的页面 thi..

    参考文章
    https://blog.csdn.net/q3254421/article/details/82927860
    https://blog.csdn.net/r_17703772792/article/details/87695065

    main.js

    Vue.prototype.$EventBus = new Vue();

    要传值的页面函数
     

    this.$EventBus.$emit('incremented', fileList.time);

    接收传值的页面
     

    
          this.$EventBus.$on('incremented', (res)=>{
            this.time = res
            }) // 可以放在 mounted 的里先试试是否可以获取到

     

    展开全文
  • 父组件向子组件传值:子组件在props中创建一个属性,用以接收父组件传来的值父组件中注册子组件在子组件标签中添加子组件props中创建的属性把需要传给子组件的值赋给该属性在子组件中创建props,然后创建一个名为 ...

    一、父子组件之间的传值

    1.父组件向子组件传值:

    子组件在props中创建一个属性,用以接收父组件传来的值

    父组件中注册子组件

    在子组件标签中添加子组件props中创建的属性

    把需要传给子组件的值赋给该属性

    在子组件中创建props,然后创建一个名为 ‘img-src’ 的数据名

    //子组件BigImg.vue

    props: ['img-src'],

    methods: {

    }

    }

    在父组件中注册子组件,并在template中加入子组件标签,标签中添加img-src属性并赋值

    name:'Home',

    components: {

    vHead,BigImg

    },

    data() {return{showImg:false,

    imgSrc:''}

    }

    2.子组件向父组件传值

    子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件

    将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法

    在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

    在子组件中创建一个按钮,给按钮绑定一个点击事件

    在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数

    //发送事件

    this.$emit('clickit')

    在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

    clickImg(e) {this.showImg = true;//获取当前图片地址

    console.log(e);this.imgSrc =e.currentTarget.src;

    }

    在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

    二、通过路由带参数传值

    两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等)

    this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) //跳转到B

    在B组件中获取A组件传递过来的参数、

    this.$route.query.orderId

    三、安装、使用 vuex

    安装vuex

    npm install vuex --save

    1.在src目录下新建store文件夹并在该文件夹下新建index.js文件。 在 store/index.js写入:

    import Vue from 'vue'import Vuex from'vuex'Vue.use(Vuex)

    const store= newVuex.Store({

    strict:true, //开启严格模式 确保state 中的数据只能 mutations 修改

    state:{

    count:0}

    })

    exportdefault store;

    在main.js中引入:

    import store from './store'

    new Vue({

    el: '#app',

    router,

    store,

    components: { App },

    template: ''

    })

    此时可以在组件中使用 this.$store.state.count 获取store中state的值。如:

    //在组件的computed中使用

    computed:{

    count(){return this.$store.state.count;

    }

    }

    {{count}}

    name:'HelloWorld',

    computed:{

    count(){return this.$store.state.count;

    }

    }

    }

    很多时候咱们要对state里的值进行操作,在vuex提供了一个方法mutations

    mutations用法(使用mutations可以修改state的值)

    在store/index.js中写入:

    //...

    state:{

    count:0},

    mutations:{//更改数据的方法

    add(state){

    state.count++},//提交载荷用法//add(state,n){//state.count += n//},

    sub(state){

    state.count--}

    }

    ...//

    在组件中使用mutations中对应的方法

    +

    {{count}}

    -

    name:'HelloWorld',

    computed:{

    count(){return this.$store.state.count;

    }

    },

    methods:{

    add(){this.$store.commit('add');

    },//提交载荷用法

    //add(){

    //this.$store.commit('add',10);

    //},

    //对象风格的提交方式

    //store.commit({

    //type: 'add',

    //n: 10

    //})

    sub(){this.$store.commit('sub');

    }

    }

    }

    此时就可以对count进行修改了。

    补充1:mutation接收单个参数和多个参数

    利用$store.commit 里面 写参数相当于 mutation的函数名字

    在组件里面:

    第一种方式:this.$store.commit("addIncrement",{name:'stark',age:18,n:5})

    第二种方式:this.$store.commit({

    type:"addIncrement",

    n:5,

    age:18,

    name:'stark.wang'})

    在vuex里面接收:接收第二个参数相当于前面传过来的参数,如果多个这个就是对象,如果是一个参数,这个第二个参数payload就是前面的参数,例如

    let store = newVuex.Store({

    state: {

    num:100},

    mutations: {//任何时候改变state的状态都通过提交 mutation 来改变

    //里面可以定义多个函数,当触发这个函数就会改变state状态

    addIncrement(state, stark) {

    console.log(stark);//接收一个state作为参数, 相当于上面的state

    //在vuex里面接收:接收第二个参数相当于前面传过来的参数,如果多个这个就是对象,如果是一个参数,这个第二个参数payload就是前面的参数。

    //mutations设计原则是同步的

    //state.num += stark;

    state.num +=stark.n;

    },

    minIncrement(state) {

    state.num-= 5;

    }

    }

    })

    补充2:遇到在组件input中直接修改state中数据的问题

    在组件中写入

    ...

    computed:{

    activeFormData(){

    return this.$store.state.formData.t1

    }

    },

    methods:{

    updataMessage(e,dataposition){

    let newposition = dataposition.split('.);

    this.$store.commit('updataMessage',{newval:e.target.value,curposition:newposition})

    }

    }

    在store.js中写入

    mutations:{

    ...

    updataMessage(state, stark) {if (stark.curposition.length == 2) {

    state.formData[stark.curposition[0]][stark.curposition[1]] =stark.newval

    }else if (stark.curposition.length == 3) {

    state.formData[stark.curposition[0]][stark.curposition[1]][stark.curposition[2]] =stark.newval

    }

    },

    }

    当你想异步操作的时候,由于mutation必须是同步的这一点,此时不能采用mutation对state 进行修改。action派上用场了,action就是一个函数集合,在里面怎么操作都可以,只要最后触发mutation 就可以了。

    注解mutation不能异步操作的原因:

    mutations: {

    add (state) {

    api.callAsyncMethod(()=>{

    state.count++})

    }

    }

    现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

    Action 用法

    在store/index.js中写入

    mutations:{ //更改数据的方法

    add(state){

    state.count++},

    sub(state){

    state.count--}

    },++++actions:{

    addAction(context){//context 与 store 实例具有相同方法和属性(但不是store 实例)

    setTimeout(()=>{

    context.commit('add');

    },1000)

    }

    }++++

    组件中使用getters里对应的方法:

    +

    ++++

    action +

    ++++

    {{count}}

    -

    test: {{doneTodos[0].text}}
    length: {{doneTodosLength}}

    export default{

    methods:{

    add(){this.$store.commit('add');//console.log(this);

    },

    sub(){this.$store.commit('sub');

    },++++add_action(){this.$store.dispatch('addAction');

    }++++}

    }

    实际异步操作

    组件methods中:

    在store/index.js中引入axios :

    import axios from 'axios'

    看到这里有没有想过当我们使用state中某一个数据时,我们只想用该数据中符合条件的数据。比如:

    state:{

    count:0,

    todos: [

    { id:1, text: 'text1--true', done: true},

    { id:2, text: 'text2--false', done: false}

    ]

    }

    此时我们只想获取state.todos中done为true的数据时我们应该怎么获取?

    可能会有以下两种方案:

    1.每个在组件中首先获取todos,然后使用filter方法过滤;

    2.写一个公共函数在每个组件中调用以下;

    如果用到todos中done为true的组件很多,这两种方法都是很不理想的。Vuex为此为我们引入了一个方法Getter。

    Getter 用法

    官方解释:Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

    在store\index.js写入:

    mutations:{ //更改数据的方法

    add(state){

    state.count++},

    sub(state){

    state.count--}

    },+++getters:{//用法类似组件中的 computed, 可以认为是store的计算属性

    doneTodos:state => { //Getter 接受 state 作为其第一个参数:

    return state.todos.filter(todo => todo.done) //-> [{ id: 1, text: 'text1--true', done: true }]

    },//Getter 也可以接受其他 getter 作为第二个参数

    doneTodosLength:(state,getters) =>{return getters.doneTodos.length //-> 1

    },+++}

    在组件中使用getter对应的方法:

    +

    {{count}}

    -

    +++

    test: {{doneTodos[0].text}}
    length: {{doneTodosLength}}

    +++

    computed:{+++doneTodos(){return this.$store.getters.doneTodos //-> [{ id: 1, text: 'text1--true', done: true }]

    },

    doneTodosLength(){return this.$store.getters.doneTodosLength //-> 1

    }+++}

    }

    作者:朴树-

    链接:https://juejin.im/post/5bf7c4375188254b9d0935c9

    来源:掘金

    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    兼职前端开发(QQ:2435289619)

    展开全文
  • vue-组件传值方式-非父子组件传值解决方案-js版

    千次阅读 多人点赞 2020-03-09 13:17:25
    文章目录一、vue-组件传值方式-非父子组件传值解决方案-js版1. 非父子组件传值-方式一【事件总线】2. 非父子组件传值-方式二【$attrs/listeners】3. 非父子组件传值-方式三【vuex】 一、vue-组件传值方式-非父子组件...

    一、vue-组件传值方式-非父子组件传值解决方案-js版
    1. 非父子组件传值-方式一【事件总线】

    场景:
    在这里插入图片描述
    事件总线

    • 步骤一:建立一个公共的js文件,专门用来传递消息。
    // bus.js
    import Vue from 'vue'
    export default new Vue;
    
    • 步骤二:在需要传递消息的地方
    // 在需要传递消息的地方引入
    import bus from './bus.js'
    // 传递消息
    bus.$emit('msg', val)
    

    具体代码举例:
    在这里插入图片描述

    • 步骤二:在需要接受消息的地方
    // 在需要接受消息的地方引入
    import bus from './bus.js'
    // 接受消息
    bus.$on('msg', (data) => {
        console.log(data);
    })
    

    具体代码举例:
    在这里插入图片描述

    2. 非父子组件传值-方式二【$attrs/listeners】
    // 解决多级组件间传值的问题
    // $attr 将父组件中不包含props的属性传入子组件,通常配合interitAttrs选项一起使用
    // $listeners 监听子组件中数据变化
    

    $attrs

    • 最外层组件统一传值
    • 接受值的组件的父组件引用子组件的地方需要绑定v-bind="$attrs"
    • 接受组件中使用this.$attrs 获取参数。
      举例: 场景
      在这里插入图片描述
      代码实现:
      A组件:
      在这里插入图片描述
      B组件:
      在这里插入图片描述
      C组件:
      在这里插入图片描述
      效果:
      在这里插入图片描述

    $listeners

    • 最外层组件监听子组件触发的事件
    • 子组件的父组件使用v-on="$listeners"绑定监听
    • 子组件使用this.$emit(“事件名”),触发事件
      场景:
      在这里插入图片描述
      C组件:
      在这里插入图片描述
      B组件:在这里插入图片描述A组件
      在这里插入图片描述
    3. 非父子组件传值-方式三【vuex】

    还有一种场景如下:OtherFather组件向Son组件传值,除了使用事件总线的方式,还可以使用vuex
    场景:
    在这里插入图片描述构造Store:
    在这里插入图片描述
    OtherFather组件:
    在这里插入图片描述
    Son组件:

    • 写法一
      在这里插入图片描述
    • 写法二
      在这里插入图片描述
      最后vuex还有很多用法,这边只是最为基础的,希望道友们自行深究。
    展开全文
  • Vue组件组件传值方式:父传子、子传父、非父子组件传值 父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息 父传子 父组件: 子组件: 2....

    Vue组件组件传值方式:父传子、子传父、非父子组件传值

    父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息
    
    1. 父传子

    父组件:
    在这里插入图片描述
    子组件:
    在这里插入图片描述
    2. 子传父

    子组件:
    在这里插入图片描述
    父组件:
    在这里插入图片描述

    1. 非父子组件传值

    非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。
    在这里插入图片描述

    组件A:
    在这里插入图片描述
    组件B:
    在这里插入图片描述

    Vue三种常用的传值方式就介绍完了,如果对你有帮助的话,点点关注吧~

    展开全文
  • 1.父组件向子组件传值1⃣️.子组件标签绑定需要传递的参数名2⃣️.子组件页面使用props 接收参数2.子组件向父组件传值1⃣️.子组件使用$emit来触发一个自定义事件,并传递一个参数2⃣️.父组件中的子标签中监听该...
  • vue父子组件传值

    2020-12-23 17:32:26
    先前做了echarts可是化,但是的由于图表比较多,所以呢打算封装公共组件。下面看一下我们的设计图稿: 折线图与柱状图的格式差不多的,封装统一的格式是很好的选择。这时候就用到了vue的父子传值。 首先,我们...
  • 5种vue组件传值方式1、通过路由带参数传值①定义路由时加上参数props: true,在定义路由路径时要留有参数占位符: name『用法: to="'路径/'+value"』②在跳转到的页面加上参数props:['name']③在跳转到的页面就...
  • vue组件传值一、 父传子1. 父组件给子组件绑定事件2. 子组件,props接收二、子传父1.子组件,this.$emit2.父组件,v-on接收三、父子组件双向绑定。单向数据流【重要】1.用watch监听。2.computed计算属性【优化】 ...
  • vue平行组件传值

    2020-08-24 10:18:11
    我是把header,left,main分开写成组件,然后引入到一个公共组件中。common是父组件,header和left是子组件 header组件,点击事件,通过$emit给父组件common传已经改变的值 common组件中接收值并赋值给left ...
  • Vue组件传值的问题

    2019-09-10 17:24:03
    父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值。 vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的),才能使用 ...
  • 组件 :1.1 通过子组件的属性传值给子组件:1)、 在父组件中直接赋值 2)、 在子组件中定义属性: props{ name:String ,sex:String }1.2 通过引用子组件的方法传:1)、父亲组件this.$refs.child1.childMethod(this....
  • 非父子组件之间传值,需要定义个公共公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果
  • 创建公共的子组件vue页面 unfold.vue <template> <div> <div v-on:click="changeFoldState()" style="margin-left: 89%;margin-top: 1%"> &...
  • 在我们入门Vue的时候,不得不提到组件,在某些情况下,组件间需要互相传值,比如父组件需要向子组件传值,子组件需要向父组件传值,那么下面用一个实力来详细说明。效果:我们想实现这样一个效果,在输入框输入文字...
  • vue组件传值

    2018-08-06 20:33:20
    vue组件传值分为三种:父传子、子传父、非父子 一、父传子:在父组件中定义一个自定义事件,在子组件中用props接受 二、子传父:在父组件中用v-on监听自定义事件,在子组件中用emit触发三、非父子:可以用公共...
  • vue中 父组件向子组件传递参数时,可以通过prop来传递参数,prop可以是数组形式,也可以是对象格式,子向父组件传递参数时,通过$emit来传递,$emit('方法名', 传参),来实现子组件和父组件数据交互,但是在父组件中...
  • Vue 2.0常用传值方式 父传子、子传父、非父子组件传值 https://blog.csdn.net/lander_xiong/article/details/79018737 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来...
  • vue 组件传值

    2021-03-09 20:41:14
    组件与子组件 1.新建一个公共eventVue.js 2.eventVue.$emit(‘infoParam’,info) 3.在mouted钩子函数里面接收 eventVue.$on(‘infoParam’,data=>{ this.getInfoParam = data })
  • 看了很多关于vue组件传值的文章,于是想把文章总结一下,把关于vue组件传值好好聊聊,欢迎大家指正。 组件之间传值主要分两种 1、父子组件:props方法、ref方法、children和parent方法、 emit方法 2、非父子组件:...
  • js内容如下:import Vue from 'vue' export default new Vue;2.在需要通信的组件都引入Bus.js (两兄弟都要引入)如上图所示大儿子按钮触发事件,$emit 传数据,另一个兄弟组件mounted接受,$on接受数据搞定但是到...
  • Vue中非父子组件传值

    2019-09-01 16:01:00
    Vue中非父子组件传值 vue官网指出,可以使用一个空vue实例作为事件中央线,也就是说非父子组件之间的通信必须有公共的实例(可以是空的),才能使用emit获取emit获取emit获取on的数据参数,实现组件通信。 创建公共...
  • 在app.vue里写了一个公共的顶部导航navbar,然后右侧有个分享按钮,而这个分享按钮只有在特定的页面才展示,项目里是在lottery.vue页面,然后想实现app.vue里点击分享按钮,触发lottery.vue里的分享方法。...
  • VUE 兄弟组件之间传值

    2020-03-30 19:20:21
    Vue兄弟组件传值 创建一个公共实例文件 Bus.js import Vue from 'vue' const bus=new Vue() export default bus 子组件 A.vue <template> <div> <button @click='emitMessage'>传给兄弟组件...
  • vue组件传值之 eventBus 使用指南

    千次阅读 2019-04-24 11:31:47
    问题背景:组件传值;在项目开发中,会发现组件传值是一个组基本的操作,也是用的最多的。但是很多时候可能涉及到爷爷和孙子,甚至重孙子之间需要的传值。这个时候eventBus就到了大显身手的时候了。 eventBus 嗯 ,...
  • 父传子用:props 子传父: 子传父主要通过事件传递给父组件(通过$emit来传) ...兄弟组件传值: 可用bus总线方式,也可以用vuex状态管理工具,建立公共j s文件专门用来传递信息; 简单的兄弟传值可以传给...
  • 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。...$route组件与 $route 的耦合router.jsimport Vue from "vue"...
  • vue2.0兄弟组件传值

    千次阅读 2019-05-07 10:50:11
    A组件和B组件是兄弟组件,A向B传值 借助Bus.js来传值 A组件通过事件触发,使用 $emit() 来传值 <script> // 引入公共的bus,来做为中间传达的工具 import Bus from '@/bus.js' export default { data ()...
  • vue组件传值props的使用

    千次阅读 2019-05-09 22:52:38
    当在页面中使用公共组件时,title会不同,因此需要将title传递给公共组件 采用props接收父组件传递过来的值 props: ['title','rightText'], 父组件中引入公共组件,并通过自定义属性传递值 <tabbar title="首页...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 257
精华内容 102
关键字:

vue公共组件传值

vue 订阅