vue.js父子组件间通信,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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。