1.父组件调用子组件
子组件children.vue代码如下:
<template>
<div>我是子组件</div>
</template>
父组件parent.vue代码如下:
<template>
<div>
<myChild></myChild>
</div>
</template>
<script>
import myChild from './child'; //第一步导入子组件
export default {
name: 'parent',
components: {
myChild
}, //第二步注册子组件
data() {
return {
}
}
}
</script>
此时在子组件中的内容会显示在组件中,总结:父组件调用子组件
(1)在父组件中通过import导入子组件。
(2)在父组件中使用components:{}注册子组件。
2.父组件向子组件传值
在子组件中,写入一个动态数据message,然后通过props把数据导出去,为外部父组件调用提供一个接口:
子组件代码如下:
<template>
<div>
我是子组件,显示来自父组件的消息{{message}}
</div>
</template>
<script>
export default {
props:["message"],
data() {
return {
}
}
}
</script>
在父组件中给message赋值:
<template>
<div>
<myChild :message="mymsg"></myChild>
</div>
</template>
<script>
import myChild from './child';
export default {
name: 'parent',
components: {
myChild
},
data() {
return {
mymsg: '向子组件发送消息:Happy'
}
}
}
</script>
在父组件中,在子组件上为:message赋值。
总结,父组件给子组件传值:子组件中要通过props把变量导出来,然后在父组件中使用该变量,为该变量赋值。
注:如果父组件传值为一个静态的值,也需要使用v-bind来告诉vue,v-bind简写为":"
例如:
<myChild v-bind:message="123"></myChild>
简写为:
<myChild :message="123"></myChild>
3.为子组件重命名
在父组件中为子组件重命名,可以在components中为子组件重命名,格式如下:
<template>
<div>
<my-child-newname></my-child-newname>
</div>
</template>
<script>
import myChild from './child';
export default {
name: 'parent',
components: {
'my-child-newname':myChild
},
data() {
return {
}
}
}
</script>
4.props用法
props通常是以字符串数组的形式列出,例如:
props:["name","age","color","job","adress"],
如果希望每个字符串都有指定值类型,可以为它定义属性:
props:{
name:String,
age:Number,
color:Boolean,
job:Array,
adress:Object
},
当父组件赋值类型不对时,浏览器控制台会提示错误信息。
5.让一个对象的属性作为prop传入
传入一个对象的所有属性,如果想让一个对象的属性作为prop传入:
子组件代码如下:
<template>
<div>我是子组件,显示来自父组件的消息{{id}}{{title}}</div>
</template>
<script>
export default {
props: ["id","title"],
data() {
return {};
}
};
</script>
父组件中定义一个对象post,它有两个属性,id和title,父组件代码如下:
<template>
<div>
<blog-post v-bind="post"></blog-post>
</div>
</template>
<script>
import myChild from "./child";
export default {
components: {
"blog-post": myChild
},
data() {
return {
post: {
id: 1,
title: "My Journey with Vue"
}
};
}
};
</script>
注释:
<blog-post v-bind="post"></blog-post>
等价于
<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>
6.传递静态或动态prop
传入一个静态的值:
<blog-post title="我是标题"></blog-post>
动态赋值:
<!-- 动态赋予一个变量的值 -->
<blog-post :childtitle="post.title"></blog-post>
<!-- 动态赋予一个复杂的表达式的值 -->
<blog-post :childtitle="post.title+'hello'+post.id"></blog-post>
任何类型的值都可以传给prop,
<!-- 传入一个数字 -->
<blog-post :childtitle1="123"></blog-post>
<!-- 传入一个布尔值 -->
<blog-post :childtitle2="false"></blog-post>
<!-- 传入一个数组 -->
<blog-post :childtitle3="[1,2,3,4,5]"></blog-post>
<!-- 传入一个对象 -->
<blog-post :childtitle4="{name:'lisa',age:12}"></blog-post>
7.单向数据流
所有的prop都使得其父子prop之间形成了一个单向下绑定:父级prop的更新会向下流动到子组件中,但是反过来则不行,这样会防止从子组件意外改变父组件的状态。
每次父级组件发生更新时,子组件中所有的prop都将会刷新为最新的值,这意味着你不应该在一个子组件内部改变prop,如果这样会在浏览器控制台报错。
这里有两中常见的试图改变一个prop的情形:
(1)这个prop用来传递一个初始值,这个子组件接下来希望将其作为一个本地的prop数据来使用,在这种情况下,最好定义一个本地的data属性并将这个prop用作其初始值。
在子组件中,有两个变量,childtitle和mycount,把childtitle导出从父组件获取值,然后传给mycount:
<template>
<div>
title数据:{{childtitle}}
<br>
count数据:{{mycount}}
</div>
</template>
<script>
export default {
props: ["childtitle"],
data() {
return {
mycount: this.childtitle
};
}
};
</script>
父级组件代码中,给childtitle赋值,此时,当点击按钮时,childtitle的值会变化:
<template>
<div>
<span @click="myClick">点击</span>
<blog-post :childtitle="parcount"></blog-post>
</div>
</template>
<script>
import myChild from "./child";
export default {
components: {
"blog-post": myChild
},
data() {
return {
parcount: 0
};
},
methods: {
myClick() {
this.parcount++;
}
}
};
</script>
以上会出现一个问题,当点击按钮时childtitle的值会跟着变化,但是子组件中mycount的值不会变化,这时mycoun需要使用计算属性computed才能使值跟着变化,子组件中的代码更改如下:
<template>
<div>
title数据:{{childtitle}}
<br>
count数据:{{mycount}}
</div>
</template>
<script>
export default {
props: ["childtitle"],
data() {
return {};
},
computed: {
mycount: function() {
return this.childtitle;
}
}
};
</script>
8.prop验证
我们可以为组件的prop指定验证要求,例如你知道的这些类型,如果有一个需求没有被满足,则Vue会在浏览器控制台发出警告。
为了定制prop的验证方式,你可以为props中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:
props: {
// 指定基础类型检查
proA: Number,
// 可以设置多个类型,该值符合其中一个即可
proB: [String, Number],
// 如果该变量必须存在,必填,可以设置required为true,可以通过type设置该值得类型
proC: {
type: Number,
required: true
},
// 可以使用default设置默认的值
proD: {
type: Number,
default: 100
},
// 可以设置带有默认值得对象
proE: {
type: Object,
//注:对象或数组默认值必须从一个工厂函数获取
default: function() {
return {
meseage: "hello"
};
}
},
// 可以自定义验证函数
proF: {
validator: function(value) {
//这个值必须匹配下列字符串中的一个
return ["success", "warning", "danger"].indexOf(value) !== -1;
}
}
},
当父级组件传过来的值不符合条件,验证失败时,vue控制台会发生警告。
注:prop会在一个组件实例创建之前进行验证,所以实例的属性(如data,computed)在default或validator函数中是不可用的。
type类型包括:
String
Number
Boolean
Array
Object
Date
Function
Symbol
注:type还可以是一个自定义的构造函数,并且通过instanceof来进行检查确认。
例如如下构造函数:
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
可以使用以下方式来验证prop的值是否通过new Person创建的。
Vue.component('blog-post', {
props: {
author: Person
}
})