vue父子组件传递数据,vue 父组件向子组件传值
大家应该知道，父组件可以把参数以属性的形式传递给子组件，传递的参数可以随时修改。但是子组件不能修改父组件传递的参数，所以下面文章主要介绍vue父子组件的值传递的相关信息以及单向数据流的问题。有需要的可以参考一下。
目录
前言1。父组件将值传递给子组件2。子组件的props类型约束问题(1)构造函数自定义类型(2)自定义函数自定义类型3。单向数据流问题摘要
前言
我们知道vue中亲子组件的核心概念是单向数据流，props是单向交付。单向数据流问题到底是什么？本文总结了关于这个知识点的学习笔记。
1.父组件传值给子组件
div id=应用程序
博客项目：title= title /博客项目
/div
//定义子组件
Vue.component(博客项目，{
道具：[title]，
data() {
返回{
}
},
模板：“p{{title}}/p”
})
//定义父组件
新Vue({
埃尔： #app ，
data() {
返回{
标题：“消息”，
}
},
})
父组件通过：title=title 将值传递给子组件，子组件通过props接收父组件的值，然后通过插值表达式渲染到页面上。
2.子组件的 props 类型约束问题
的常见类型约束如下：
道具：{
标题：字符串，
喜欢：数字，
isPublished: Boolean，
注释：数组，
作者：对象，
回调：函数，
contactsPromise: Promise //或任何其他构造函数
}
除了以上常见的类型，vue还提供了构造函数和自定义函数来自定义子组件props的类型。
（1）构造函数自定义类型
//两个组件通用的自定义函数
职能人员(名字，姓氏){
this.firstName=名字
this.lastName=姓氏
}
//在子组件中使用
Vue.component(博客帖子，{
道具：{
作者：人
}
//在父组件中使用
var obj=新人( 1 ， 2 )
博客帖子：作者= obj /博客帖子
在上面的代码中，首先定义一个公共的自定义构造函数，通过它可以创建一个对象。实例对象有两个属性，即firstName和lastName。在父组件中调用这个构造函数，创建一个obj实例并传递给子组件，定义类型为constructor的子组件的prop接收该对象。
（2）自定义函数自定义类型
//自定义函数
Vue.component(博客帖子，{
道具：{
PropsA: String，//必须是字符串类型
PropsB: [String，Number]，//多个可选类型
Propsc: {type: number，default: 100}，//定义类型并设置默认值
//自定义验证函数
propsD:{
验证器：函数(值){
//该值必须与下列字符串之一匹配
return [成功，警告，危险]。indexOf(value)！==-1
}
}
}
Vue提供了非常灵活的类型来定义子组件的接收参数，上面的代码通过定义验证函数来限制父组件的值类型。
3.单向数据流问题
单向数据流是vue中亲子组件的核心概念，props是单向绑定的。当父组件的属性值发生变化时，会传递给子组件进行相应的变化，从而形成单向的向下绑定。父组件的属性变化会流向向下的子组件，但相反，为了防止子组件无意中修改父组件中的数据，影响其他子组件的状态，vue规定不允许数据自下而上的流动。
当父组件的属性改变时，它将被传递到子组件，而子组件的属性改变不会影响父组件。在这种情况下，你可能会觉得props有点鸡肋，只能在初始化组件的时候使用，不能在子组件内部操作。所以我们在使用的时候经常会有两种板房操作道具：(1)定义一个局部变量，用道具初始化，以后再操作这个局部变量。(2)定义一个计算属性，处理props并返回。
div id=应用程序
博客项目：title= title 1 /博客项目
博客项目：title= title 2 /博客项目
博客项目：title= title 3 /博客项目
整点
Button @click=toclick 单击我/button
/div
//定义子组件
Vue.component(博客项目，{
道具：[title]，
data() {
返回{
}
},
模板：“p{{title}}/p”
})
//父组件
新Vue({
埃尔： #app ，
data() {
返回{
标题1:“111”，
标题2:“222”，
标题3:“333”
}
},
方法：{
toclick() {
this.title3=000
}
}
})
div id=应用程序
博客项目：title= title /博客项目
/div
//定义子组件
Vue.component(博客项目，{
道具：[title]，
计算值：{
computedTitle() {
返回 computedTitle this.title
}
},
data() {
返回{
副标题：“副标题”this.title
}
},
模板： p { { title } }==={ { subTitle } }==={ { computed title } }/p
})
//父组件
新Vue({
埃尔： #app ，
data() {
返回{
标题：“111”，
}
},
})
总结
关于vue父子组件值传递和单数据流的文章到此结束。关于vue父子组件值传递和单数据流的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。