精华内容
下载资源
问答
  • vue组件间参数传递的方法
    2020-04-30 22:11:57

    Vue组件间的参数传递
    1、父组件与子组件传值

    • 父组件传给子组件:子组件通过props方法接受数据;
    • 子组件传给父组件: $emit 方法传递参数

    2、非父子组件间的数据传递,兄弟组件传值

    • eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适(虽然也有不少人推荐直接用VUEX,具体来说看需求咯。技术只是手段,目的达到才是王道)。
    更多相关内容
  • VUE 组件间参数传递样例
  • 主要介绍了vue组件间参数传递 ,需要的朋友可以参考下
  • 主要介绍了vue组件向子组件(props)传递数据的方法,文中给大家补充介绍了vue父子组件间传值(props)的实现代码,需要的朋友可以参考下
  • vue组件之间的参数传递

    千次阅读 2021-05-02 16:53:37
    vue组件之间的参数传递:父传子。 先在子组件中通过props:[参数]设参,然后在父组件中通过<组件标签 :参数名=“要赋予的值”></组件标签>传参,最后在子组件中接参。 props是表示组件的参数部分,那么...

    vue组件之间的参数传递:父传子。

    先在子组件中通过props:[参数]设参,然后在父组件中通过<组件标签 :参数名=“要赋予的值”></组件标签>传参,最后在子组件中接参。
    在这里插入图片描述
    props是表示组件的参数部分,那么props有两种写法:

    1. props:[“参数列表”]
      比如:props:[‘prop01’,‘pro02’,‘pro03’,…]
    2. props:{参数名1:{type:参数类型,required:是否是必须的参数true或者false,default:默认值},参数名2:{},参数名3:{},…}
      比如:
    props: {
        "MyTitle":{
          type: String,
          required:true,
          default:"XXX"
        }
      }
    

    vue组件之间的参数传递:子传父。

    简单来说和父传子其实差不多,但在这个过程中是父组件传可以改变父参数的方法给子组件,然后子组件通过这个方法的形参传递参数改变。
    在这里插入图片描述

    火箭发射子传父

    在子组件中定义一个带有语句this.$emit('键名', "值");方法,通过执行这个方法会将参数从底向上传递出去像火箭发射一样。
    父组件通过@键="要改变的参数值=$event"接收参数。
    父组件核心代码:

    
    <template>
      <div id="app">
        <!-- <MyHeader></MyHeader> -->
        <MyContent :MyTitle='msg' @newMsg="msg=$event"></MyContent>
        <!-- <MyBotton></MyBotton> -->
      </div>
    </template>
    
    

    子组件核心代码:

    定义的函数
     methods: {
        fire:function(){
          this.$emit('newMsg', "火箭传来的参数");
        }
      }
    
    通过单击btn的单击事件触发
    <button type="button" @click="fire()">改变title内容</button>
    
    展开全文
  • 主要介绍了Vue2.0父子组件传递函数的教程详解,需要的朋友可以参考下
  • 主要介绍了vue组件中的数据传递方法,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
  • Vue 组件间传值及事件回调
  • 组件通过$emit传递组件的数据,this.$data指当前组件的data(return{…})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传...
  • 主要介绍了vue两个组件间值的传递或修改的实现代码,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue组件间传递数据的几种方式

    千次阅读 2022-03-18 16:15:49
    // 父组件使用组件传递参数 name <child :name="name"></child> 二.子传父 通过$emit 传递数据给父元素 // 子组件定义事件 this.$emit('事件名称', '传递参数') //例: this.$emit('add', 111...

    一.父传子 子组件通过props属性接收

    // 在子组件内定义组件接收一个参数 name
    {
      props: ['name']
    }
    // 父组件使用组件时传递参数 name
    <child :name="name"></child>
     

    二.子传父 通过$emit 传递数据给父元素

    // 子组件定义事件

    this.$emit('事件名称', '传递的参数') //例: this.$emit('add', 111)

     

    // 父组件监听事件的触发

    <child @事件名称="事件触发的方法"/>

    三.任意组件间通信

    1.全局事件总线

    // 定义事件总线

    let bus = new Vue()

    Vue.prototype.bus = bus

    或者在入口文件的new vue实例的时候在里面放入一个初始化钩子

    Vue.prototype.$bus=this

     

    // 定义发送事件

    this.bus.$emit('事件名称', data)

     

    // 定义接收事件 并在回调中接收参数

    this.bus.$on('事件名称', (data) => {      

    })

    2.消息订阅与发布(pubsub)

    步骤

    一 、安装pubsub: npm i pubsub-js

    二、引入:import pubsub from 'pubsub-js'

    三、接收数据:a组件想接收数据,则在a组件中订阅消息,订阅的回调留在a组件自身methods

     methods(){

              demo(data){}

    },

    mounted(){ 

    this.pid=pubsub.subscribe('xxx',this.demo) //订阅消息

    }

    四、提供数据:pubsub.publish('xxx',数据)

    五、最好在beforeDestroy钩子中,用pubSub.unsubscribe(pid)去取消订阅

    五.通过vuex的状态管理器

    展开全文
  • 在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况: 第一种:静态数据传递传递一个 字符串 第二种:动态数据传递:绑定一个字符...
  • Vue组件参数传递问题

    2020-12-24 20:29:04
    Vue组件参数传递问题组件中的data为什么是函数?组件中的数据是保存在哪里呢?顶层的Vue实例中吗?并不是的,组件无法访问Vue实例中的data。即使可以访问,如果所有组件的数据都在顶级Vue实例中,那么Vue中的data会...

    Vue组件参数传递问题

    组件中的data为什么是函数?

    组件中的数据是保存在哪里呢?顶层的Vue实例中吗?并不是的,组件无法访问Vue实例中的data。即使可以访问,如果所有组件的数据都在顶级Vue实例中,那么Vue中的data会十分的臃肿。组件中的数据应该由自己管理。

    组件是一个单独功能模块的封装,这个模块有属于自己的HTML模板,也应该有属于自己的数据data,不过这个data是一个函数。这是为什么呢?

    这是为了保证组件复用时,属性之间的隔离。利用方法都会重新开辟内存空间的机制。当创建多个相同组件实例时,不同组件实例之间的data必须保证不被共享

    父子组件通讯之props(父->子)

    需求1:在页面中,父组件请求得到的数据需要在子组件中展示。

    需求2:子组件很多,每次创建都要向后他发送数据,在父组件中进行请求,将数据传递给子组件展示。

    Vue中提供了props用于父组件向子组件中传递数据

    在子组件中,使用props声明需要从父级接收到的数据

    props的值有两种方式:

    方式一:字符串数组,数组中的字符串就是传递时的属性名称。

    方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。

    数组形式的传递

    1、在父组件中创建数据

    data() {

    return {

    userId: "rayfoo",

    name:'rayfoo',

    hobby: ['抽烟','喝酒','烫头']

    };

    }

    2、在子组件中创建props

    props: ['name','hobby']

    3、在子组件中使用属性

    4、在父组件中导入并使用子组件

    import News from "./views/home/news";

    components: {

    News

    }

    对象形式的传递

    对象参数的传递需要指定对象类数据类型、[默认值]、[是否必传]等参数

    支持的类型类型

    String

    Number

    Boolean

    Object

    Data

    Function

    Symbol

    props:{

    title:{

    //数据类型 参数可以指定多个[String,Number,...]

    type: String,

    //默认值,在没有引入传递参数时渲染

    default: 'Message',

    //是否为必传参数

    required: false

    },

    hobby:{

    type: Array,

    default: function(){

    return ['抽烟','喝酒']

    }

    }

    }

    需要注意的时,当类型如果是Object或者Array,默认值必须是一个函数。

    子组件向父组件传递数据

    子组件中配置事件发送:

    template:

    我是一个小按钮

    methods:

    methods: {

    giveAdvice: function(){

    this.$emit('give-advice',this.title);

    }

    }

    父组件中监听

    template:

    methods:

    showAdvice: function (advice) {

    alert(advice)

    }

    需要注意的是,事件如果传递的是驼峰式,需要使用下划线形式发射。具体的操作可以参考官方API

    参数同步问题

    如果父子间传递的参数需要实时的进行双向绑定,该如何做?

    如果修改了props中的值,父组件中的内容不会修改。Vue不推荐在子组件中直接修改props的值。

    如果需要修改props中的值,可以在子组件中创建一个data或者computed副本

    使用@input事件实现双向绑定

    子组件代码:

    1、在子组件中声明props,由父组件传递。

    2、创建props的副本,当props的副本

    3、使用v-model绑定props副本的值

    4、监听控件的@input,当值发生改变,修改参数值,并且将值弹回父组件

    发射属性到父组件

    export default {

    name: 'chidren',

    props: {

    title: String,

    info: String

    },

    data(){

    return{

    param: 'GIAO',

    dparam: this.title

    }

    },

    methods:{

    giao: function(){

    this.$emit('giao',this.param);

    },

    valChange: function(event){

    let newVal = event.target.value;

    this.param = newVal;

    this.$emit('title-change',newVal);

    }

    }/*,

    watch:{

    dparam(oldVal,newVal){

    this.param = newVal;

    this.$emit('title-change',newVal);

    }

    }*/

    }

    父组件代码

    父组件中可以直接使用v-model来修改子组件中属性

    import Childred from './Chidren';

    export default {

    name: 'parent',

    data(){

    return {

    title: 'rayfoo',

    info: '真帅'

    }

    },

    methods:{

    giao: function(param){

    alert(param);

    },

    titleChange:function(newVal){

    this.title = newVal;

    }

    },

    components:{

    Childred

    }

    }

    如果数据类型不是String,可能要牵涉一些类型转换问题。

    使用watch进行子父组件双向绑定

    略。。。

    父组件中取得子组件的对象

    $children-不常用

    上面的案例中我们已经成功的在父组件中取得子组件的属性,也可以从子组件中拿到父组件的属性,下面介绍一个更加简单的操作形式-从父组件中拿到子组件对象。

    在父组件中,可以使用:this.\(children[index].属性名、this.\)children[index].方法名来获取子组件内的属性和方法,但是在开发过程中一般不会使用这样的形式,因为其依赖下标,有很多的不确定性。

    btnClick: function(){

    console.log(this.$children[0].param);

    this.$children[0].showInfo();

    }

    $refs-常用

    可以在引用子组件的位置给子组件指定一个ref属性,例如ref='aaa'

    此时,this.\(refs.aaa就是子组件对象,就可以在父组件中使用this.\)refs.aaa来访问子组件啦~

    btnClick: function(){

    console.log(this.$refs.child.param);

    }

    子组件中访问父组件对象

    $parent不常用

    在子组件中可以直接使用$parent来访问父组件中的内容,但是在子组件中频繁父组件中的内容,会使得组件的耦合度非常的高,所以开发过程中不常用。

    btnClick: function(){

    console.log(this.$parent.title);

    }

    $root

    使用$root可以获取根组件中的内容

    btnClick: function(){

    console.log(this.$root.title);

    }

    展开全文
  • Vue父子组件之间的参数传递

    千次阅读 2020-09-06 18:06:25
    组件之间的参数传递——父传子 1原理说明 2代码 3效果 二组件之间的参数传递——子传父 1原理说明 2代码 三以事件发射的方式实现子传父 1原理 2代码 3效果 一组件之间的参数传递——父传子 1原理说明 ...
  • Vue组件间常用传参方式

    千次阅读 2022-04-24 16:37:19
    Vue组件间常用传参方式 1. props、emit(最常用的父子通讯方式) 父传子 父组件传入属性,子组件通过props接收,就可以在内部this.XXX的方式使用 // 父组件 <hello-world msg="hello world!"><hello-...
  • 主要介绍了vue组件使用自定义事件向父组件传递数据的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • vue页面间参数传递方法总结

    万次阅读 2018-11-20 21:20:53
    方法一:通过路由带参数进行传值 方法二:通过设置 Session Storage/local Storage缓存的形式进行传递 1、 原生用法使用 2、 对Session Storage/local Storage缓存进行统一封装 方法三:父子组件之间的传值(通过...
  • 1.父传子:通过自定义属性来...在父组件使用子组件的时候,给父组件添加自定义属性,属性值为传递的数据 3.在子组件通过 props接受父组件的数据,props值是数组,元素是自定义属性 4.在子组件中使用的时候与data数据一样
  • VUE 父子组件传递

    2019-02-23 10:08:39
    HTML编码中,利用了Vue框架,在该框架下父子组件直接经常需要进行数据传递
  • 主要为大家详细介绍了vue-router实现组件间的跳转,参数传递方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • // asyncData为异步获取的数据,想传递给子组件使用 父组件 <child child-data=asyncData></child> [removed] import child from './child' export default { data: () => ({ asyncData: '' }), ...
  • 今天小编就为大家分享一篇vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue组件之间传递数据的五种方式

    千次阅读 2020-11-09 23:05:29
    Vue 组件之间数据传递的几种方式: 父组件向子组件传递数据,使用props属性;子组件向父组件传递数据,在子组件中使用$emit派发事件,父组件中使用v-on 监听事件;缺点:组件嵌套层次多的话,传递数据比较麻烦。 ...
  • 组件接收父组件参数的时候,...你父组件向子组件传递的内容,子组件有权对这个内容进行一些约束,这个约束我们可以把它叫做参数的校验。 <child content=hello></child> Vue.component('child',{ props: ['
  • Vue组件封装 参数传递和事件传递

    千次阅读 2018-12-14 09:39:00
    参数传递组件先定义好接收的参数和事件 {{title}} ()" >刷新 props: {//参数传递需要在props里面声明 'title': { type: String, default: '' }, }, methods: {//事件传递需要通过$emit...
  • vue axios get/post 请求 数组参数 搜索功能含多选就涉及到数组参数传递,比如 id=[1,2,3,4],后台接收的参数类型为 id=1&id=2&id=3$id=4,引入qs对传递参数进行处理 get请求:对参数params进行处理 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,595
精华内容 21,038
关键字:

vue组件间参数传递的方法