004 Vue (030 - 033)
Posted carreyblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了004 Vue (030 - 033)相关的知识，希望对你有一定的参考价值。
[A] 父子通信
1. 父组件与子组件之间是不能直接访问对方的数据的，需要通过相关方法实现通信
2. 实际中，通常需要数据从上往下传，即大组件(父组件)传到小组件(子组件)中，
比如：请求数据时一次性请求所有数据，请求到的返回值通过大组件传给小组件，然后进行计算和展示
3. 也需要数据从下往上传，即小组件(子组件)传到大组件(父组件)中
比如：xxx
vue提供了两种方式：
父传子步骤：
1. 在父组件的data中写入需要传送的数据
2. 在子组件中添加props对象，存储用于接收数据的变量名
3. 在html中调用子组件时, 将父组件和子组件相应的存储发送和接收数据的变量名进行绑定即可(v-bind方法)
示例：
// html元素
<div id="div0">
// 3. 绑定传送数据和接收数据
<mycpn :cmovies="movies" :cmessage="message"></mycpn>
</div>
// vue对象
Vue.component("mycpn", {
template:`
<div>
这是一个组件<br>
<button>确定</button>
<input></input>
<button>取消</button><br>
{{cmovies}}{{cmessage}} // 4. 展示接收到的数据
</div>
`,
props:["cmovies", "cmessage"], // 2. 接收到的数据存储在这两个变量中
})
new Vue({
el: "#div0",
data:{
name: "jack",
age: 20,
movies:["海贼王", "警察故事", "老师好"] // 1. 需要传送的数据
message: "yes"
},
})
类型限制：
在使用props接受数据时，除了将props设置成数组，还可以设置成对象
设置为对象时，可以对接收到的数据指定数据类型
如：
props:{
cmovies: Array,
cmessage: String
// 可指定的数据类型有：Array, String, Number, Boolean, Object, Date, Function, Symbol
}
【注】数据类型为Object或者Function时，默认值必须写成函数形式，即：
cmessage:{
type: Object(或者Function)，
default: function(){
return "默认值(可为空数组)"
}
}
提供默认值：
在没有接收到父组件传到的参数时，给子组件的接受参数设置默认值
【格式】
props:{
cmovies: Array,
cmessage: {
type: String,
default: "aaaaaaaaaa"
}
}
必填变量：
某些参数需要设置required属性来指定该变量必须传入数据
【语法】：
props:{
cmessage: {
type: String,
default: "aaaaaaaaaa",
required: true
}
}
多种数据类型：
某些变量可以传入多种数据类型,通过数组指定可以传入的数据类型
【语法】：
props:{
cmovies: [Array, String]
}
数据验证：
对于传入的数据，我们可以做更进一步细致的验证，以检查输入的数据是否符合要求
添加validator属性进行数据验证
【语法】：
props:{
cmessage: {
type: String,
validator: function(value){
return [‘success‘, ‘warning‘, ‘danger‘].index0f(value) != -1
// 指定传入的数据必须是这三个之一
}
}
}
父传子的驼峰标识
子组件的props中用于接受数据的变量若是组合单词，习惯上采用驼峰式命名，但是在vue中这样做会报错
采用的方案是变量名全部用小写，单词之间用短划线(-)连接即可。
[C] 子传父步骤：
1. 子组件绑定一个事件，启动该事件将调用函数，将数据发送给父组件绑定的那个自定义事件
2. 父组件自定义的事件，绑定一个函数
3. 父组件一直监听自定义的这个事件名，接收到数据后，即调用绑定该事件名的函数
4. 父组件调用绑定的函数后，便可接收到数据并进行后续操作
示例：
// html页面：
<div id="div0">
<mycpn @rev="receivemoney($event)"></mycpn>
// 步骤3：父组件自定义事件接收到子组件发送的数据，调用函数并将数据传入
</div>
// vue实例
// a. 定义组件内容
<template id="sub">
<div>
这是一个组件<br>
<button @click="givemoney()">确定</button>
// 步骤1：子组件的某个事件绑定一个函数，该函数用于发射数据
<input></input>
<button>取消</button><br>
<cpn></cpn>
</div>
</template>
// b. 注册组件
Vue.component("mycpn", {
template: "#sub",
data(){
return {
name: "jack",
age: 20,
money: 1000
}
},
methods:{
givemoney:function(){
this.$emit("rev", this.money);
// 步骤2：子组件调用的函数将自己的数据发送给父组件自定义的事件
}
}
})
// c. vue实例化
new Vue({
el: "#div0",
data:{
movies: ["钢铁侠", "华为", "小米"],
message: "yes"
},
methods:{
receivemoney:function(ev){
// 步骤4： 父组件调用的函数将接收到的数据打印
console.log(ev);
}
}
})
以上是关于004 Vue (030 - 033)的主要内容，如果未能解决你的问题，请参考以下文章
(尚030)Vue_案例_存储数据(localStorage本地存储技术)
Python Hash MD5 不等于 SQL Server