本文主要详细介绍vue与其子组件之间的通信方式。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下,希望能帮到你。
目录
一、道具二。细节三。道具案例命名三。非道具属性IV。子组件传递给父组件五、简单的例子总结了如何在vue中实现父子组件通信。本博客将详细介绍亲子组件通信的过程。
如图所示,父组件可以通过props向子组件传递数据,子组件可以通过触发事件向父组件传递数据。
一、props
从父组件传递到子组件的数据是通过props传递的。我们可以把道具理解为属性。Props交付存在两种格式,一种是数组格式,一种是对象类型格式。第二个对象类型可以设置它是否是必需数据以及是否有默认数据。
第一种用法:数组
//父组件
hello world:title=' title '/hello world
//子组件
道具:['title'],
第二种用法:对象
//父组件:
hello world:title=' title '/hello world
//子组件:
道具:{
标题:{
类型:字符串,
必填:真,
默认(){
返回“我是标题”
}
}
},
//为什么上面的默认是函数?
因为是组件,所以组件可以在其他组件中使用,如果默认是键;价值形式,而价值是一种参照
如果你想改变道具的值,其他组件的值也会改变。
类型属性的类型有哪些?
类型属性的类型有:字符串、数字、布尔值、数组、对象、日期、函数、符号。
三、对象类型的其他写法
道具:{
messageinfo:字符串,
propsA:数字,
propsC:{
类型:字符串,
必填:真
},
建议:{
类型:对象,
默认(){
return {message:'你好' }
}
},
//自定义验证函数
标题:{
验证器(值){
console.log('hhh ')
return ['hello ',' world']。包括(值)
}
}
}
二、细节三props大小写命名
如果道具名是用hump命名的,可以用-connection。
//父组件
hello world:mess-age=' title '/hello world
//子组件
道具:{
消息:{
类型:字符串,
}
},
三、非props的attributes属性
如果在父组件中设置了属性,但它不存在于子组件的props中,那么如果子组件有根节点,该属性将被继承到根节点。
如果不希望根节点继承,可以使用inherattrs:false,这样就可以继承到非根节点。
模板
div{{ messAge }}
h1:class=' $ attrs . class ' hhhhh/h1
/div
/模板
如果有多个根节点,将显示警告,表明它不能自动继承。在这种情况下,我们可以使用$attrs。属性名来实现继承属性。
模板
h1{{ messAge }}/h1
h1哈哈哈/h1
H1:呵呵呵/h1
/模板
四、子组件传递给父组件
1.当子组件发生某些事情时,比如单击一个组件,父组件需要切换内容。2
2.子组件有一些想要传递给父组件的内容。
3.子组件通过$emit()触发事件,并在emit中注册事件。
4.注册的事件可以是数组类型或对象类型。
五、简单例子
数组格式
//子组件
模板
button @click='增量' 1/button
按钮@click='减量'-1/按钮
/模板
脚本
导出默认值{
发出:['add ',' sub'],
data() {
返回{
}
},
方法:{
增量:函数(){
这个。$emit('add ')
},
减量:函数(){
这个。$emit('sub ')
},
},
};
/脚本
样式范围/样式
//父组件
模板
h1的当前数量是:{{counter}}/h1
hello world @ add=' addOne ' @ sub=' subOne '/hello world
/模板
脚本
从'导入HelloWorld。/components/HelloWorld.vue '
导出默认值{
组件:{ HelloWorld },
data() {
返回{
计数器:0
}
},
方法:{
addOne() {
这个柜台
},
subOne() {
这个柜台-
}
}
}
/脚本
样式范围/样式
数组格式:如果我们想要设置自定义事件,可以使用发出:['add ',' sub'],数组格式。
对象格式:主要是针对需要向父组件传递参数的例子。
//父组件
模板
氕当前的数字是:{{counter}}/h1
hello world @ add=' addOne ' @ sub=' subOne ' @ addN='添加号码'/hello world
/模板
脚本
从'导入你好世界./components/HelloWorld.vue '
导出默认值{
组件:{ HelloWorld },
data() {
返回{
计数器:0,
}
},
方法:{
addOne() {
这个柜台
},
subOne() {
这个柜台-
},
添加号码(值){
this.counter=parseInt(value)
}
}
}
/脚本
样式范围/样式
//子组件
模板
按钮@click='增量1/按钮
按钮@click='减量'-1/按钮
输入类型='text' v-model='num' /
按钮@ click=' increment N ' N/button
/模板
脚本
导出默认值{
发出:{
添加:空,
sub:null,
地址:(调度)={
如果(调度10) {
返回真实的
}
返回错误的
}
},
data() {
返回{
数字:0,
};
},
方法:{
增量:函数(){
这个. emit(' add ');
},
减量:函数(){
这个. emit(' sub ');
},
incrementN: function () {
这个. emit('addN ',这个。num);
},
},
};
/脚本
样式范围/样式
这里采用对象的格式:可以进行传入参数的判断。如果符合则返回没错,如果不符合则返回假的,但是仍可以执行,只是在控制台出现警告。
发出:{
添加:空,
sub:null,
地址:(调度)={
如果(调度10) {
返回真实的
}
返回错误的
}
}
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。