美文网首页
Vue开发:组件之间的数据传递

Vue开发:组件之间的数据传递

作者: 何小鹏 | 来源:发表于2018-10-15 14:36 被阅读51次

问题:兄弟组件之间的通讯(EvenBus的通信方式)
解决方式:

//Bus引用
import Vue from "vue"
export default new Vue();
 //通过emit触发事件,并传值
 bus.$emit("eventTarget","传值");
//emit里面的值可以为字符串、数组、对象
  //通过on监听事件,回调方法获取数据
  bus.$on("eventTarget",v=>{
     console.log(v);
 });

问题:Vue生命周期的理解
解决方式:

1741752219-59c9b774a4ccf_articlex.png 3346068135-580822cd52898_articlex.png

问题: vue中的 ref 和 $refs
解决方案:

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
父组件

//html部分
<template>
 <div class="analysis-content">
      <EditAttribute :AttributeData="AttributeData" ref="formIndexAttribute"></EditAttribute>
</div> 
</template>
//js部分
<script>
methods: {
    edit() {
      this.$refs.formIndexAttribute.handleSubmit();
    }, 
  }
</script>

子组件

  <Form ref="formValidate" :label-width="100" class="indexForm"> 
              <FormItem v-if="item.fillInType === 0" :label="item.name" :prop="item.name">
                <Input :disabled="true" :value="item.value" @on-change="saveInputData($event,index)"></Input>
              </FormItem>
              <FormItem v-if="item.fillInType === 1" :label="item.name" :prop="item.name" :required="item.required == 1">
                <Input type="textarea" :value="item.value" @on-blur="saveInputData($event,index)"></Input>
              </FormItem> 
 </Form>
<script>
  handleSubmit() {}
</script>

主要解决的情况是:点击父组件里面的按钮获取到子组件form表单里的所有值。

问题:props和data都做同一个变量声明,导致报错

The data property "AttributeData" is already declared as a prop. Use prop default value instead.

解决方案:一般父子组件传值只需要在props中声明即可,data声明的是当前组件使用的变量。

问题:Git用户权限错误
解决方案:修改config文件,在请求地址前面加上用户名:用户密码@请求地址

相关文章

  • Vue2.x开发饿了么项目(header部分)

    header组件开发 数据之间的传递 App.vue 引入组件,App.vue 中注册组件,使用组件时 要记得传...

  • Vue组件通信

    简介 组件是Vue的核心,而组件间的状态管理和数据传递是开发绕不开的问题。在Vue中,组件和组件之间是相互独立的,...

  • vue中组件的通信方式

    在vue项目开发中,组件之间进行数据传递,是必不可少的,那么今天就来总结一下vue中组件通信的集中方式。 一、父子...

  • vue 事件总线EventBus的概念、使用以及注意点

    vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件;子传父通过$em...

  • vue 中几种传值方法

    前言 vue项目中,组件跟组件之间数据的传递是很普遍的行为,在这里总结几种常见的vue组件跟组件之间传值方式,其中...

  • 关于$on的用法

    $on 兄弟组件之间相互传递数据 示例 父组件 $onFa.vue 创建一个vue的空白实例 emptyVue.j...

  • Vue开发:组件之间的数据传递

    问题:兄弟组件之间的通讯(EvenBus的通信方式)解决方式: 问题:Vue生命周期的理解解决方式: 问题: vu...

  • VUE的props理解

    vue的组件之间是独立的,为了在组件之间传递数据,我们需要用到不同的手段。父组件->子组件:props子组件->父...

  • Vue之间的通信方式

    Vue组件间通信方式 快速原型开发 可以快速识别.vue文件封装组件插件等功能 一.Props传递数据 在父组件中...

  • Vue组件间数据传递

    前言 总结vue组件间的数据传递 路由传参 父组件传递数据给子组件---props 子组件传递数据给父组件---$...

网友评论

      本文标题:Vue开发:组件之间的数据传递

      本文链接:https://www.haomeiwen.com/subject/cwgxzftx.html