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注意事项及用得较多的属性归纳的更多相关文章

  1. params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render

    params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render

  2. Vue.js学习笔记--1.基础HTML和JS属性的使用

    整理自官网教程 -- https://cn.vuejs.org/ 1. 在HTML文件底部引入Vue <script src="https://cdn.jsdelivr.net/npm ...

  3. Vue.js 源码分析(十) 基础篇 ref属性详解

    ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: ...

  4. vue 打包上线后 所使用的css3渐变属性丢失的问题解决方案

    最近在做vue项目的时候用到了css3渐变属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: .join{ position:absolute; left:1rem; botto ...

  5. (vue.js)axios interceptors 拦截器中添加headers 属性

    (vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...

  6. Blazor和Vue对比学习（基础1.3）：属性和父子传值

    组件除了要解决视图层展示.视图层与逻辑层的数据绑定,还需要解决一个重大问题,就是在组件树中实现数据传递,包括了父到子.子到父.祖到孙,以及任意组织之间.而我们上一章讲到的实现双向绑定的两个指令,Vue ...

  7. VUE注意事项（建项目）

    1>删除空格影响的:删除掉框中的代码 2>不需要新建,直接打开APP.vue,在此文件上进行修改,(注意:index.html最好不要进行修改) 3>修改APP.vue为自己需要的页 ...

  8. Vue注意事项

    在使用Vue中的函数或自己定义的函数或指令的时候,Vue说明如下 在一些自己定义或系统定义的驼峰命名规则的时候,你需要到元素区域引用的使用中间的大写要改成小写在谭家 一条横杠如: 你在var=new ...

  9. vue中给请求到的数据对象加属性问题

    今天发现了个很奇怪的问题,我在做一个:点击列表  使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...

随机推荐

  1. 调整JVM虚拟机的内存大小

    jvm默认只有64M; public static void main(String[] args){ byte b[] = new byte[1024*1024*65];//此时会报内存溢出: } ...

  2. Python print输出重定向到文件和屏幕，超简单

    import sys import os class Logger(object): def __init__(self, filename="log.txt"): self.te ...

  3. tomcat目录映射

    环境:CentOS 6 + tomcat 7 + jdk 7 目前使用2种方法: 1.tomcat/conf/server.xml <Host name="localhost" ...

  4. 题解-bzoj2154Crash的数字表格 & bzoj2693 jzptab

    Problem bzoj2818-单组询问-无权限 bzoj2693-多组询问-需权限 洛谷1829-单组询问-无权限 \(T\)组询问(如果有),给定 \(n,m\),求 \[\sum_{i=1}^ ...

  5. FHQ Treap摘要

    原理 以随机数维护平衡,使树高期望为logn级别 不依靠旋转,只有两个核心操作merge(合并)和split(拆分) 因此可持久化 先介绍变量 ; int n; struct Node { int v ...

  6. 专题1:记忆化搜索/DAG问题/基础动态规划

      A OpenJ_Bailian 1088 滑雪     B OpenJ_Bailian 1579 Function Run Fun     C HDU 1078 FatMouse and Chee ...

  7. <context:annotation-config />和 <context:component-scan

    <context:annotation-config />和 <context:component-scan>同时存在的时候,前者会被忽略. 也就是那些@autowire,@r ...

  8. 获取日期Date

    获取特定时间戳: new Date("2018-06-12").getTime()   processDate(){ return { disabledDate(time){ re ...

  9. v-on 绑定自定义事件

    每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue 的事件系统与浏览器的 EventTarget API  ...

  10. ssdb主从及双主模型配置和简单管理

    ssdb主从及双主模型配置和简单管理 levelDB是一个key->value 的数据存储库,其只能在本地保存数据,支持持久化,并且支持保存非常大的数据,单机redis在保存较大数据的时候数十G ...