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 href="javascript:;" @click.prevent="flag=true">登录</a>
<a href="javascript:;" @click.prevent="flag=false">注册</a>

<login v-if="flag">
</login>
<register v-else="flag">
</register>
</div>

var vm = new Vue({
el: "#box",
data: {
flag: true
},
methods: {}
});
</script>

如要切换3个及以上的组件则需要使用 :is 属性来执行。
如：<component :is="componentId"></component>

具体实施：
<div id="box">

<a href="javascript:;" @click.prevent="componentId='login'">登录</a>
<a href="javascript:;" @click.prevent="componentId='register'">注册</a>
<component :is="componentId"></component>
</div>

var vm = new Vue({
el: "#box",
data: {
componentId: 'login' // 默认显示登录
},
methods: {}
});
</script>

5、父组件引用子组件，通过绑定属性（v-bind:）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用。

<template id="temp">
<h3>子组件 --- 父组件：{{parentmsg}}</h3>
</template>

注意：父组件绑定的属性名称不能有大写字母，否则不会显示，并且在命令行会有提示：

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({
id: this.id,
user: this.user,
content: this.content
});
}
},
props: ['plist']
}
}
});
</script>
</body>
</html>
把添加ID，评论人，内容作为子组件，把列表作为父组件，然后把添加的数据放到父组件列表上，由于要获取到父组件列表的数据，所以必然涉及到父组件向子组件传值的过程。这里还通过子组件方法参数来保存父组件的数据到子组件的数据中。

Vue注意事项及用得较多的属性归纳

猜你喜欢