精华内容
下载资源
问答
  • vue传值

    2020-11-04 21:28:28
    vue传值的几种方法 在vue开发过程中,组件是必不可少的。由于页面通常有多个组件组成,所以需要一些组件之间传值方法,本文将从以下几个常用的传值方式来给出一定的传值示例 父子传值 父传子 父组件引入子组件 父...

    vue传值的几种方法

    在vue开发过程中,组件是必不可少的。由于页面通常有多个组件组成,所以需要一些组件之间传值方法,本文将从以下几个常用的传值方式来给出一定的传值示例

    父子传值

    • 父传子
    1. 父组件引入子组件
    2. 父组件通过v-bind动态赋值
    3. 子组件通过props 接收父组件传过来的值
    • 子传父
    1. 子组件通过点击事件触发$emit(“函数名”,参数1,参数2)
    2. 父组件中引入的子组件需要自动监听由子组件"注册"的 'sonChange’事件,然后调用receive方法来更改数据
    <!-- 父组件->
     <son :propdata = prop @sonChange="receive" ></son>
    import son from '../components/son.vue'
    data:function(){
    	return {
    		prop:"父传子"
    	}
    }
    methods:{
    	receive:function(flag,num){
    		//接收子组件传来的两个值
    		console.log(flag,num)
    	}
    }
    <!-- 子组件->
    <div>{{counter}}</div>
    <botton @click=Change>点击跟改</botton>
     props:["prop"]
     data:function(){
    	counter: this.prop
    }
    methods:{
    	Change:function(){
    		let flag = true
    		let num = 1
    		//传多个值给父组件
    		this.$emit("sonChange",flag,num)
    	}
    }
    

    将一个对象所有的属性都传过去 ,可以使用不加参数的v-bind

    post: {
      id: 1,
      title: 'My Journey with Vue'
    }
    v-bind="post"
    

    注意:props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件修改父组件的状态。所以不应该在子组件中修改 props 中的值,Vue 警告。

    ref和$refs的传值

    • ref

    ref 被用来给元素或子组件注册引用信息, 引用信息将会注册在父组件的 $refs 对象上,如果是在普通的DOM元素上使用,引用指向的就是 DOM 元素,如果是在子组件上,引用就指向组件的实例。

    • $refs

    $refs 是一个对象,持有已注册过 ref 的所有的子组件

    1、ref 加在普通的元素上,用this.$ref.name获取到的是dom元素

    2、ref 加在子组件上,用this.$ref.name获取到的是组件实例,可以使用组件的所有方法。

    代码演示

    <!--父组件-->
     <son  ref="monitorFactor" @popChange="popChange"  ></son>
     //点击触发add函数
      add:function (){
    	 this.$nextTick(()=>{
    	//通过使用$refs可以获取子组件的init 函数 将team 与true传给子组件
             this.$refs.monitorFactor.init(team,true)
         })
    },
    ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期mounted(){}钩子中调用,或者在 this.$nextTick(()=>{})中调用。
    
    <!--子组件-->
     init(team,flag){
     		//接收到值
          console.log("flag:",flag)
        }, 
      
    

    兄弟传值

    非父子传参,需要有共同的父组件。需要定义公共的公共实例文件,作为中间仓库。不然达不到传值效果。

    //main.js
    var bus = new Vue();
    Vue.prototype.bus = bus;
    
    //兄弟组件
    bus.$emit('val',flag) //传值
    bus.$on('val',(flag)=>{ console.log(data)})  //接收值
    

    vuex传值

    1 src新建一个vuex文件夹
    2 vuex文件夹里新建一个store.js
    3 安装vuex cnpm install vuex --save
    4 在刚才创建的store.js 中引入vue、vuex 引入vuex 并且use

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

    5 定义数据 state在vuex中用于存储数据

    var state = {  count:1,}
    

    6 定义方法 mutations里边放的是方法,方法主要用于改变state里边的数据

    var mutations = {
        incCount(){
                ++state.count;
       }
    }
     //类似于计算属性  state里边的数据改变时候触发的方法。 可以做一些操作 并且可以有返回值
    var getterfl={
             completedCountChange(state){
             return state.count * 2 +'位';
            }
        }
    

    Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态。Action 可以包含任意异步操作

    var actionfl = {
      asynIncCount(context){  
    //因此你可以调用context.commit来提交一个mutation  使用action需要用dispatch
          context.commit('incCount');
      }
    }
    

    7 实例化 vuex

    const store = new Vuex.Store({
                state,//state: state  简写
                mutations: mutations,//属性的简写是 mutations
        getters:getterfl,
           actions:actionfl,
    })
    

    8 对外暴露

    export default  store;
    

    9 在需要用的地方引入

    import store from '../vuex/store.js'
    

    10 注册store ,放在methods,data同级

    export default {
        data(){
            return{}
        },
        store:store,
        methods:{
            incCount(){
                this.$store.commit('incCount');
            }
        }
    }
    

    11 使用vuex

    使用数据: this.\$store.state.count
    调用方法: this.$store.commit('incCount');
    

    12.适用场景
    父子组件、兄弟组件、无关系组件任意组件之间的传值

    Vuex本质上也是一种本地存储,比localStorage的单纯值传递多了方法、属性、异步方法等功能。但是因为是将内容本地化,所以就会被在浏览器中获取到。

    展开全文
  • vue 传值

    2018-09-20 16:20:09
    vue 的组件传值分三类:1.父传子 2.子传父 3.非父子 其传值步骤如下: 第一种父:传子: 1.根组件即父组件,将要传递的值或者数据作为属性放置在要接收值的开始标签中— 属性名自定义,属性值为传递的data变量 2.在...

    vue组件的作用域之间是相互独立的,一个组件不能使用另外一个组件的数据,所以为了
    实现一个组件可以使用另外一个组件的数据,我们需要用到传值
    vue 的组件传值分三类:1.父传子 2.子传父 3.非父子
    其传值步骤如下:
    第一种父:传子:
    1.根组件即父组件,将要传递的值或者数据作为属性放置在要接收值的开始标签中—
    属性名自定义,属性值为传递的data变量
    2.在子组件中(要接收数据的那个子组件)通过props属性接收传递过来的数据str(子组
    件开始标签中自定义的属性名)
    3.在组件模板中直接调用,当前的元素(str)即可-----但是:一旦福组件的数据发生变化,子组件接收
    的数据也会发生改变-----所以还需要有第四步,建立单项数据流,即,使父组件传递到自福建的数据,不在受父组件的影响
    4.在子组件的data中重新声明一个变量(为null或者’’),接收props中传递的数据,该变量的数据,在后期使用时直接调用即可

    	第二种:子传父:
    		1.在子组件的某个的方法中,通过调用$emit发射一个 自定义事件,即$emit(eventname,data)
    		2.在父组件调用子组件的位置(即,子组件的开始标签)上,通过v-on监听子组件的发射过来的事件
    		即@eventname=function(父组件生命的function)接收传递过来的数据
    		3.在父组件中声明一个变量,接收传递过来的数据
    
    
    	第三种:	非父子传值
    		1.在要传值的组件A的某个方法中,通过创建空的vue实例bus擦混噶几安一个自定义事件
    		即bus.$emit(eventname,并传递数据)----要传递的数据储存在bus实例中
    		2.在要接收数据的组件B中的mounted声明周期函数中,通过bus.$on来监听发射的自定义事件
    		,并在回调函数中,接收传递的数据bus.$on(eventname,callback)
    		3.将接收的数据储存在data变量中
    	注意:非父子传值的本质就是:将要传递的数据,储存在空的vue实例bus中,然后利用bus进行数据的传输
    
    展开全文
  • 1.html部分 <div id="test"> <my-component :testData="testData"></my-component> <...Vue.component('my-component',{ templata:`<div>{{testData}}+二蛋</div>`, ...

    1.html部分

    <div id="test">
    	<my-component :testData="testData"></my-component>
    </div>
    

    2.自定义组件

    Vue.component('my-component',{
    	templata:`<div>{{testData}}+二蛋</div>`,
    	propos:['testData'],
    });
    

    3.new一个Vue

    myVue=new Vue({
    	el:'#test',
    	data:{
    		testData:'你好'
    	},
    })
    
    展开全文
  • Vue传值取值大总结

    2020-09-12 18:53:40
    Vue传值大总结 前言 一直想成为一个全栈人员,学习前端也是必备技能之一,Vue作为现在比较流行的框架,我也想学习一下,今天把Vue那些转的头晕的传值方法总结一下,以备以后查看 使用props传值 props可以用于父组件...

    Vue传值大总结

    前言

    一直想成为一个全栈人员,学习前端也是必备技能之一,Vue作为现在比较流行的框架,我也想学习一下,今天把Vue那些转的头晕的传值方法总结一下,以备以后查看

    使用props传值

    props可以用于父组件传值到子组件

    //父组件
    <child-label title='aaaa'></child-label>
    // 子组件
    export default {
    	props:[title,]
      }
    

    此时这个title从父组件传到了子组件

    使用$emit

    // 子组件
    methods:{
           sendMsg(){
               this.$emit('childData', 'child to parent')
           }
       }
    // 使用父组件
    <hello-vue @childData="getMsg"></hello-vue>
    
    methods:{
        getMsg(val){
          this.childMsg = val
        }
    }
    

    使用公共js进行传值

    // 公共js
    import Vue from 'vue'
    export default new Vue
    
    
    // 父组件
    import bus from bus //引入公共的js
    methods:{
    	sendMsg(){
    		bus.$emit('aaa', 'bbb')
    	}
    }
    
    // 子组件
    import bus from bus
    bus.$on('aaa')
    

    通过childrenchildren和parent

    一个人可以有多个孩子,但是一个孩子只能有一个父亲$children是一个列表存储的数据通过索引获取即可

    通过$attrs获取

    如果和props一样传值,但是props已经使用的值,$attrs无法获取

    $listensers

    通过$listensers监控$emit数据的改变

    this.$emit('childData', 'child to parent')
    console.log('listensers', this.$listeners.childData)
    
    展开全文
  • vue传值为空问题

    千次阅读 2019-06-18 16:58:18
    vue解决组件传值异步问题:https://blog.csdn.net/qq_15243963/article/details/80134142 vue父组件异步获取动态数据传递给... 由于vue传值时数据会更新,在一些时候传递的值会出现为空的情况,且created生命周期只...
  • vue传值大全

    2019-03-14 17:46:52
    vue组件传值大全
  • Vue传值(3种常用传值方法) 父组件传值给子组件,首先父组件发送的形式是用bind(用缩写:)绑定值到子组件身上。然后子组件用属性props接收。 子组件传值父组件,首先是子组件发送的形式是this.$emit(事件名,需要...
  • vue传值以及调用方法

    2019-03-01 10:04:00
    vue传值以及调用方法 1.组件传值  a.父==&gt;子  a.1:父组件里面引入子组件,&lt;div :op="sonOp"&gt;&lt;/div&gt; ==&gt;给sonOp进行赋值。  a.2:子组件&...
  • Vue传值—特殊的eventBus 前言 作为一枚前端小白发布了我的第一篇博文,主要说说我心掌握的一种传值技巧,特殊的eventBus,是一种对eventBus的修改版,下面我就将这种技巧传递给更多还不知道此技巧的人哈哈哈。 简略...
  • Vue传值方式

    2020-07-23 21:44:41
    Vue有三种传值方式: 父传子 子传父 非父子传值 父组件向子组件传值 父组件: <template> <div id="app"> <input type="text" v-model="name"> <HelloWorld msgs="父传子"></Hello...
  • vue传值示例

    2020-07-24 11:57:48
    Vue常用的三种传值方式有: 1.父传子 2.子传父 3.非父子传值 **1.父传子:** 父级:` ` 子級:` {{mag}} ` 2.子传父 子級: 父級: <template> <div id="app"> <...
  • Vue 传值问题

    2019-07-22 14:51:12
    Vue常见的三种传值方式: 父组件传值给子组件,方法:在父组件中v-bing绑定属性和属性值,在子组件中用props接受这个属性; 子组件传值给父组件,方法:在子组件用this.$emit(事件名,值)发送,在父组件中用 @事件...
  • vue传值:兄弟间传值

    2020-04-09 15:17:51
    1.新建bus.js import Vue from 'vue' export default new Vue; 2.在a组件产生需要传递的值 ...import Bus from '@/components/bus/...//兄弟间传值---设置值 Bus.$emit('navItemtable',this.navItemtable); 3.在b...
  • vue传值问题

    2020-12-02 10:14:21
    奇葩问题 : 删除一条数据,出现id带等于号的 解决方案: 1. 前端传值出现问题 2. 后台请求参数问题 修改前:js 修改后 js
  • vue传值方法

    2020-07-23 21:50:50
    父传子:父组件向子组件进行传值props 父: <template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputNa
  • Vue传值—特殊的eventBus(无惧页面刷新版) 前言 上一篇文章我介绍了我那特殊的eventBus,但是后来我发现了它的弊端,以至于它在我内心当中的形象一落千丈,降落到什么程度呢,它的高度只比路由传值当中params高一...
  • vue传值方法 话不多说 开干 1、父传子 第一种:父传子 父: 父组件: (v-model双向绑定) 子组件 子组件: {{inputName}}
  • VUE传值图解

    千次阅读 2019-02-21 14:29:15
  • vue传值方式

    千次阅读 2018-03-19 10:09:04
    一、路由传值//params使用场景 router.push('/users/123') // 跳转时 router.push({ // 另一种方式跳转 name: 'users', params: { id: 123 } }) // 获取id route.params.id // 123 // 实际URL地址 =&gt; ...
  • 花里胡哨的vue传值

    2017-11-28 13:41:45
    vue项目中,不可避免的会在不同组件之间进行传值 ,不同需求下有各式各样的传值方式。就比如说,兄弟组件传值,父子子父之间传值,路由传值,ref方式传值或者是共享状态(数据)等,一些花里胡哨的方式,都有各自...
  • 记录:vue传值

    2019-07-10 11:24:00
    一、兄弟组件之间的传值 传值逻辑: 1、借助父组件作为中转站 2、两个兄弟组件,组件1内部在需要传值给组件2的地方通过触发this.$emit('changeMapTypeHandle', 改变后的值),将需要传给组件2的值进行传值 3、父组件...
  • iframe给Vue页面传值 第一步:需要在iframe的index.html 的js 加入下面代码 <!DOCTYPE html> <!-- Generated by PHPWord --> <html> <head> <meta charset="UTF-8" /> <...
  • 众所周知,vue提供了很多套组件间传值的方法,父子组件直接用props和$emit就好,大型项目则用vuex,但有一种更适合在小项目中使用的非父子组件传值方法,即bus总线机制。它的用法的实现原理是前端面试中常考的。在第...
  • 父组件传值给子组件,首先父组件发送的形式是用bind(用缩写:)绑定值到子组件身上。然后子组件用属性props接收。 子组件传值父组件,首先是子组件发送的形式是this.$emit(事件名,需要发送的值),事件名:父组件on...
  • Dialog in Vue 传值

    千次阅读 2018-10-24 18:17:50
    ... &lt;xx-dialog v-if="dialogData" :dialog-data="dialogData"/&gt; ...父控件绑定动态值到Dialog,Dialog第一次展示未能接收到值,第二次打开Dialog才能接收到值。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,249
精华内容 4,499
关键字:

vue传值

vue 订阅