Erlo

vue的组件化运用(数据在两个组件互传,小问题总结)

时间:2019-03-15 12:02   阅读:70次   来源:博客园页面报错

点赞 打赏

×打赏

支付宝

微信

一、vue的组件化应用

  首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用。

  1.两个vue页面

  2. slot占位符(可用可不用)

  3.props内置属性

  4.watch监听函数

  5.import导入vue的功能

  6.data的return里需要返回值需要放进去,如 data: ' ' 就行了

  第一步,写好两个vue页面,我这里写的是dialog(对话框)的弹框运用

(1)子组件(dialog)基本代码如下

  

<template>
  <el-dialog title="编辑规格" :visible.sync="sizeedit" @close="closingedit" width="30%">

  <el-form :model="form" ref="form" label-width="80px" :rules="rules">
      <el-form-item label="规格名称" prop="name">
    <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    </el-form>
   <div slot="footer" class="dialog-footer">
      <el-button type="warning" size="small" @click="reset('form')">重置</el-button>
      <el-button type="danger" size="small" @click="close">取消</el-button>
      <el-button type="primary" size="small" @click="save('form')">保存</el-button>
   </div>
 </el-dialog>
</template>

data里

form: {}

 

sizeedit: false,

methods里

   close () {
      this.$emit('close-sizeedit', true)
    },
    reset () {
      this.$refs.form.resetFields()
    },
    closingedit () {
      this.$emit('close-sizeedit', true)
    },

(2)父组件中

需要传递的值为id,通过函数传递id

handleEdit (id) {
      console.log(id)
      this.editId = id
      this.sizeeditVisible = true
      console.log(this.sizeeditVisible)
    },

所以交流的值是editId

(3)两个页面基本完成的情况下,第一步,导入子组件,并且绑定传递的参数

import sizeedit from './sizeedit'

 components: {
    sizeedit
  }

<sizeedit 
:sizeedit-visible="sizeeditVisible" 
@close-sizeedit="sizeeditVisible = false" 
:edit-id="editId"/>

父组件,data里

editId: '',
sizeeditVisible: false,

子组件,要开始添加内置属性props和watch监听参数的变化,然后执行函数

 props: {
    'sizeeditVisible': Boolean,
    'editId': String
  }
watch: {
    sizeeditVisible () {
      this.sizeedit = this.sizeeditVisible
      this.showEdit()
    }
  }

methods里

 showEdit () {
      console.log(this.editId)
      let formData = new FormData()
      formData.append('id', this.editId)
      let config = {headers: {'Content-Type': 'multipart/form-data'}}
      this.$http.post('/psi/base/edit', formData, config).then(res => {
        console.log(this.form)
        this.form.name = res.data.data.name
      })
    }

那么,基本只要父组件的id是确实在变化而且不是undefined【一般都是输入框变化的值】(判断方法,在相应函数下,console.log(id)),那么form里的规格名称就会改变。

组件套用,参数(String,Boolean)传递基本完成。

二、小问题总结

需要注意的几个小问题

1.关于form的

-1 this.$refs.form.resetFields()  是清空form数据的函数,但是前提,你的form属性不能少,form-item里props一定要有

-2 一定要有v-model属性,如文中的v-model = "form.name"

-3 在data里的数据,form需要帮name占位,这样子,你传递的值才会放进来

form: { name: '' }
            

2.关于子父组件的

-1 绑定数据时,一定要注意,父组件里需要定义editId,在data设置为空就行(注意在父组件用console.log检测是否id有值)

-2 子组件里,要有props和watch,用来监听你的值发生变化,从而相应做出动作

-3 在父组件引用子组件时,要记得用import导入,而且在components组件里,导入那个标签,从而才能在父组件的vue页面里放子组件的大标签

-4 注意传递的数据,在引用子组件标签时,绑定editId

3.关于敲代码找错的

-1 遇到问题,看控制台,点击右键,检查,然后在console里看是什么错

-2 如果console里没有报红,而又确实没有数据,那你就要考虑是函数功能并没有被调用,还是你没有把数据放进去,导致调用了也是空值

-3 学会找到出错的地方,比如你想实现那个功能,但是点击发现并没有发生函数功能,那么你就需要检查函数,以及相关的绑定值,多打打console.log,看是否都有值。

暂时这篇文章涉及到的就是String和Boolean类型的传值,晚点看下下次有没有空,再添加一下form的传递,就是Object,会比较蛋疼,但是和这里的写法是不一样的。

前端实习满3个月,vue边学边用1个半月,还不错,加油继续肝,有没有大神有其他前端的知识推荐我去看一下,或者说我自己最近抽点时间看下红客的知识,还有想要学服务器部署环境,将项目发布到自己域名上,榨油。

下一篇:前端基础之--css中可被继承和不可被继承的属性

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-05-22 16:07:10Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 首页 笔记分享 案例展示 ERLO 搜索
    鼠标试试
    返回顶部