,,vue父子组件进行通信方式原来是这样的

,,vue父子组件进行通信方式原来是这样的

本文主要详细介绍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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: