这篇文章将为大家详细讲解有关vue父子组件传值以及单向数据流问题的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
计算
安全
数据库
网络和加速
企业服务
<div id="app">
<blog-item :title="title"></blog-item>
</div>
// 定义子组件
Vue.component("blog-item", {
props: ['title'],
data() {
return {
}
},
template: "<p>{{title}}</p>"
})
// 定义父组件
new Vue({
el: "#app",
data() {
return {
title: "msg",
}
},
})父组件通过 :title = "title" 将值传递给子组件，子组件中通过 props 来接收父组件的值，然后通过插值表达式渲染在页面中。
常见的类型约束如下：
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}除了上面常见的类型外，vue 还提供了构造函数和自定义函数来自定义子组件 props 的类型。
//两个组件公共的自定义函数
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
//子组件中使用
Vue.component('blog-post', {
props: {
author: Person
}
//父组件中使用
var obj = new Person("1","2")
<blog-post :author='obj'></blog-post>上面的代码中，首先定义一个公共的自定义构造函数，通过该构造函数来可以来创建一个对象，该实例对象有两个属性，分别是 firstName 和 lastName，在父组件中调用该构造函数创建一个 obj 实例并传递给子组件，子组件定义类型为构造函数的 prop 接收该对象。
// 自定义函数
Vue.component('blog-post', {
props: {
propsA: String,//必须是字符串类型
propsB: [String,Number],//多个可选的类型
propsC: {type:Number,default:100},//定义类型并设置默认值
// 自定义验证函数
propsD:{
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}vue 中提供了非常灵活的来自定义子组件接收参数的类型，上面的代码中通过自定义了验证函数来约束父组件中的传值类型。
单向数据流是vue 中父子组件的核心概念，props 是单向绑定的。当父组件的属性值发生变化的时候，会传递给子组件发生相应的变化，从而形成一个单向下行的绑定，父组件的属性改变会流向下行子组件中，但是反之，为了防止子组件无意间修改了父组件中的数据而影响到了其他的子组件的状态，vue 规定了从下往上的数据流是不允许的。
当父组件的属性改变，会传递给子组件，而子组件的属性改变不会影响父组件，这样的话可能会觉得 props 有点鸡肋了，只能初始化组件的时候使用，在子组件内不能进行操作，因此我们在使用的时候经常有两种板房去操作props:（1）定义一个局部变量，并用props 初始化它，以后操作这个局部变量。（2）定义一个计算属性，处理props并返回。
<div id="app">
<blog-item :title="title1"></blog-item>
<blog-item :title="title2"></blog-item>
<blog-item :title="title3"></blog-item>
<hr>
<button @click='toclick'>点我</button>
</div>
// 定义子组件
Vue.component("blog-item", {
props: ['title'],
data() {
return {
}
},
template: "<p>{{title}}</p>"
})
// 父组件
new Vue({
el: "#app",
data() {
return {
title1: "111",
title2: "222",
title3: "333"
}
},
methods: {
toclick() {
this.title3 = "000"
}
}
})
<div id="app">
<blog-item :title="title"></blog-item>
</div>
// 定义子组件
Vue.component("blog-item", {
props: ['title'],
computed: {
computedTitle() {
return "computedTitle" + this.title
}
},
data() {
return {
subTitle: "subTitle" + this.title
}
},
template: "<p>{{title}}==={{subTitle}}==={{computedTitle}}</p>"
})
// 父组件
new Vue({
el: "#app",
data() {
return {
title: "111",
}
},
})
关于“vue父子组件传值以及单向数据流问题的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
