Vue注意事项及用得较多的属性归纳
1、prop是一个对象而不是字符串数组时，它包含验证要求。
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组／对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
2、父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
$on(eventName) 监听事件
$emit(eventName) 触发事件
3、使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名（如myLogin），则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时在两个单词之前，使用 - 链接（<my-login></my-login>）；如果不使用驼峰,则直接拿名称来使用即可；
注意：不论是哪种方式创建出来的组件，组件的 template 属性指向的模板内容，必须有且只能有唯一的一个根元素，否则会报错。
4、用于登陆和注册两个组件之间的切换问题：使用flag即可。
注：由于flag的值只有true和false，所以只能用于两个组件间 的切换，当大于两个组件的切换就不行了。具体操作如下：
<div id="box">
<!-- 给a注册点击事件，切换flag状态 -->
<a href="javascript:;" @click.prevent="flag=true">登录</a>
<a href="javascript:;" @click.prevent="flag=false">注册</a>
<!-- 使用v-if v-else切换组件 -->
<login v-if="flag">
</login>
<register v-else="flag">
</register>
</div>
<script>
Vue.component('login', {
template: '<h3>登录组件</h3>'
});
Vue.component('register', {
template: '<h3>注册组件</h3>'
});
var vm = new Vue({
el: "#box",
data: {
flag: true
},
methods: {}
});
</script>
如要切换3个及以上的组件则需要使用 :is 属性来执行。
如：<component :is="componentId"></component>
具体实施：
<div id="box">
<!-- 给a注册点击事件，切换flag状态 -->
<a href="javascript:;" @click.prevent="componentId='login'">登录</a>
<a href="javascript:;" @click.prevent="componentId='register'">注册</a>
<component :is="componentId"></component>
</div>
<script>
Vue.component('login', {
template: '<h3>登录组件</h3>'
});
Vue.component('register', {
template: '<h3>注册组件</h3>'
});
var vm = new Vue({
el: "#box",
data: {
componentId: 'login' // 默认显示登录
},
methods: {}
});
</script>
5、父组件引用子组件，通过绑定属性（v-bind:）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用。
<div id="box">
<mycom v-bind:parentmsg="msg"></mycom>
</div>
<template id="temp">
<h3>子组件 --- 父组件：{{parentmsg}}</h3>
</template>
<script>
var vm = new Vue({
el: "#box",
data: {
msg: '父组件的msg'
},
methods: {},
components: {
mycom: {
template: "#temp",
// 对传递给子组件的数据进行声明，子组件才能使用
props: ['parentmsg']
}
}
});
</script>
注意：父组件绑定的属性名称不能有大写字母，否则不会显示，并且在命令行会有提示：
6、组件data数据和props数据的区别：
data数据是子组件私有的，可读可写；
props数据是父组件传递给子组件的，只能读，不能写。
案例：发表评论功能
父组件为评论列表，子组件为ID，评论者，内容和按钮的集合，在输入ID，评论者等内容，然后点击添加的时候，需要首先获取子组件的list列表，然后再添加新的列表项到列表中。
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script rel="script" src="js/jquery.min.js"></script>
<script rel="script" src="js/vue.min.js"></script>
</head>
<body>
<div id="box">
<mycom :plist="list"></mycom>
<!--父组件列表-->
<ul>
<li v-for="item in list" :key="item.id">
ID:{{item.id}} --- 内容：{{item.content}} --- 评论人：{{item.user}}
</li>
</ul>
</div>
<!--子组件：内容需要添加到父组件的列表中-->
<template id="tmp1">
<div>
<label>
ID:
<input type="text" v-model="id">
</label>
<br>
<label>
评论者:
<input type="text" v-model="user">
</label>
<br>
<label>
内容:
<textarea v-model="content"></textarea>
</label>
<br>
<!-- 把父组件的数据作为子组件的函数参数传入 -->
<input type="button" value="添加评论" @click="addContent(plist)">
</div>
</template>
<script>
var vm = new Vue({
el: "#box",
data: {
list: [{
id: Date.now(),
user: 'user1',
content: 'what'
}, {
id: Date.now(),
user: 'user2',
content: 'are'
}]
},
methods: {},
components: {
mycom: {
template: '#tmp1',
data: function () {
return {
id: '',
user: '',
content: '',
}
},
methods: {
addContent(plist) {
//plist.unshift({ //可向数组的开头添加一个或更多元素,并返回新的长度。
plist.push({ //将新项添加到数组末尾，请使用 push() 方法。
id: this.id,
user: this.user,
content: this.content
});
}
},
props: ['plist']
}
}
});
</script>
</body>
</html>
把添加ID，评论人，内容作为子组件，把列表作为父组件，然后把添加的数据放到父组件列表上，由于要获取到父组件列表的数据，所以必然涉及到父组件向子组件传值的过程。这里还通过子组件方法参数来保存父组件的数据到子组件的数据中。
Vue注意事项及用得较多的属性归纳的更多相关文章
- params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render
params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render
- Vue.js学习笔记--1.基础HTML和JS属性的使用
整理自官网教程 -- https://cn.vuejs.org/ 1. 在HTML文件底部引入Vue <script src="https://cdn.jsdelivr.net/npm ...
- Vue.js 源码分析(十) 基础篇 ref属性详解
ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: ...
- vue 打包上线后 所使用的css3渐变属性丢失的问题解决方案
最近在做vue项目的时候用到了css3渐变属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: .join{ position:absolute; left:1rem; botto ...
- (vue.js)axios interceptors 拦截器中添加headers 属性
(vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...
- Blazor和Vue对比学习（基础1.3）：属性和父子传值
组件除了要解决视图层展示.视图层与逻辑层的数据绑定,还需要解决一个重大问题,就是在组件树中实现数据传递,包括了父到子.子到父.祖到孙,以及任意组织之间.而我们上一章讲到的实现双向绑定的两个指令,Vue ...
- VUE注意事项（建项目）
1>删除空格影响的:删除掉框中的代码 2>不需要新建,直接打开APP.vue,在此文件上进行修改,(注意:index.html最好不要进行修改) 3>修改APP.vue为自己需要的页 ...
- Vue注意事项
在使用Vue中的函数或自己定义的函数或指令的时候,Vue说明如下 在一些自己定义或系统定义的驼峰命名规则的时候,你需要到元素区域引用的使用中间的大写要改成小写在谭家 一条横杠如: 你在var=new ...
- vue中给请求到的数据对象加属性问题
今天发现了个很奇怪的问题,我在做一个:点击列表 使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...
随机推荐
- maven坐标的获取
网址:https://mvnrepository.com 网站上可以搜索具体的组织或项目关键字,之后复制对应的坐标到pom.xml中.如:
- Python open() 函数
open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, closefd=T) 模式 描述 r 以只读方 ...
- FAT文件系统规范v1.03学习笔记---2.FAT区之FAT数据结构（Fat Data Structure）
1.前言 本文主要是对Microsoft Extensible Firmware Initiative FAT32 File System Specification中文翻译版的学习笔记. 每个FAT ...
- MongoDB 和 NoSQL简介
MongoDB 是一个基于分布式文件存储的数据库( https://www.mongodb.com/ ).由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案.MongoDB ...
- ARM的Jazelle技术【转】
转自:https://blog.csdn.net/ken_yjj/article/details/6797290 Come From: http://www.arm.com/zh/products/p ...
- mysql死锁-查询锁表进程-分析锁表原因【转】
查询锁表进程: 1.查询是否锁表 show OPEN TABLES where In_use > 0; 2.查询进程 show processlist 查询到相对应的进程===然 ...
- Python使用MySQL数据库【转】
转自 Python使用MySQL数据库(新)[很详细][fetchall和fetchmany有啥区别呢?] - CSDN博客https://blog.csdn.net/u011350541/artic ...
- 设计模式C++学习笔记之六（Facade门面模式）
Facade门面模式,也是比较常用的一种模式,基本上所有软件系统中都会用到. GOF 在<设计模式>一书中给出如下定义:为子系统中的一组接口提供一个一致的界面, Facade 模式定义 ...
- 钉钉消息通知机器人python版
参考官方文档https://open-doc.dingtalk.com/microapp/serverapi2/qf2nxq #coding=utf8 import requests import j ...
- cocos开发插件笔记
写插件菜单时要注意大小写 { "name": "hello-world", "version": "0.0.1", &q ...