vue的组件化运用(数据在两个组件互传,小问题总结)
一、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个半月,还不错,加油继续肝,有没有大神有其他前端的知识推荐我去看一下,或者说我自己最近抽点时间看下红客的知识,还有想要学服务器部署环境,将项目发布到自己域名上,榨油。
vue的组件化运用(数据在两个组件互传,小问题总结)的更多相关文章
- vue.js原生组件化开发(二)——父子组件
前言 在了解父子组件之前应先掌握组件开发基础.在实际开发过程中,组件之间可以嵌套,也因此生成父子组件. 父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件chi ...
- vue组件化之模板优化及注册组件语法糖
vue组件化之模板优化及注册组件语法糖 vue组件化 模板 优化 在 https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- App 组件化/模块化之路——Android 框架组件(Android Architecture Components)使用指南
面对越来越复杂的 App 需求,Google 官方发布了Android 框架组件库(Android Architecture Components ).为开发者更好的开发 App 提供了非常好的样本. ...
- 大话大前端时代(一) —— Vue 与 iOS 的组件化
序 今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开发人员既写前端又写 Java 的 Velocity 模板而得来,不过现在大前端的范围已 ...
- vue04 组件化开发 Vue自动化工具
5. 组件化开发 5.1 组件[component] 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网 ...
- vue项目中使用组件化开发
最近在使用vue-cli结合webpack打包工具开发一个后台管理系统,使用vue难免需要运用组件化思想,而这也正是vue的一大特点. 在之前做的vue项目中,稍微有一点组件化的思想,可能是对组件化不 ...
- 三. Vue组件化
1. 认识组件化 1.1 什么是组件化 人面对复杂问题的处理方式 任何一个人处理信息的逻辑能力都是有限的,所以当面对一个非常复杂的问题时我们不太可能一次性搞定一大堆的内容. 但是我们人有一种天生的能力 ...
- vue - Vue组件化编程
今天是对vue组件化的一个理解,最主要的单文件组件,然后就可以脚手架的学习了,本来昨晚就该上传的,但是用的那个上传博客园的Python脚本不行了,换了一个新的. 组件化让我越来越感觉到框架的力量了 一 ...
随机推荐
- 游戏AI之初步介绍(0)
目录 游戏AI是什么? 游戏AI和理论AI 智能的假象 (更新)游戏AI和机器学习 介绍一些游戏AI 4X游戏AI <求生之路>系列 角色扮演/沙盒游戏中的NPC 游戏AI 需要学些什么? ...
- Windows核心编程第二章,字符串的表示以及宽窄字符的转换
目录 Windows核心编程,字符串的表示以及宽窄字符的转换 1.字符集 1.1.双字节字符集DBCS 1.2 Unicode字符集 1.3 UTF-8编码 1.4 UTF - 32编码. 1.5 U ...
- 陪你解读Spring Batch(二)带你入手Spring Batch
前言 说得多不如show code.上一章简单介绍了一下Spring Batch.本章将从头到尾搭建一套基于Spring Batch(2.1.9).Spring(3.0.5).mybatis(3.4. ...
- salesforce初探
Salesforce的商业模式? 从做CRM SAAS起家,可以理解为在线CRM,不需要硬件和服务器,输入用户名和密码就能登陆使用.2007年推出PaaS平台Force.com,可以说,它依托CR ...
- 章节九、5-IE Driver
一.下载IE浏览器驱动,然后解压到存放谷歌和火狐驱动的相同路径中(请观看前面的章节) 下载地址一:http://selenium-release.storage.googleapis.com/inde ...
- Windows Server 2016-Powershell之客户端加域
将本地计算机添加到域或工作组,可通过Add-Computer命令操作,具体信息如下: 语法: Add-Computer [-DomainName] <String> [-ComputerN ...
- @Autowired注解警告Field injection is not recommended
在使用spring框架中的依赖注入注解@Autowired时,idea报了一个警告 大部分被警告的代码都是不严谨的地方,所以我深入了解了一下. 被警告的代码如下: @Autowired UserDao ...
- 从0到1打造自己的VOIP网络电话系统(基于FreePBX)
从0到1打造自己的网络电话系统 最近流量卡越来越便宜了,看看自己手里的"坑不死老用户"的联通卡,顿时感觉到深深的恶意,但是iPhone没有双卡功能,所以只好自己动手打造一个网络电话 ...
- 用ASP.NET Core 2.1 建立规范的 REST API -- HATEOAS
本文所需的一些预备知识可以看这里: http://www.cnblogs.com/cgzl/p/9010978.html 和 http://www.cnblogs.com/cgzl/p/9019314 ...
- 网络协议 12 - HTTP 协议:常用而不简单
系列文章传送门: 网络协议 1 - 概述 网络协议 2 - IP 是怎么来,又是怎么没的? 网络协议 3 - 从物理层到 MAC 层 网络协议 4 - 交换机与 VLAN:办公室太复杂,我要回学校 网 ...