Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of values passed by vue parent-son components and one-way data flow. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

1. The parent component passes a value to the child component / / defines the child component Vue.component ("blog-item", {props: ['title'], data () {return {}}, template: "

{{title}}

"}) / / define the parent component new Vue ({el:" # app ", data () {return {title:" msg ",}},})

The parent component passes the value to the child component through: title = "title", and the child component receives the value of the parent component through props, and then renders it in the page through an interpolation expression.

two。 The problem of props Type constraint of Sub-component

Common type constraints are as follows:

Props: {title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise / / or any other constructor}

In addition to the common types above, vue also provides constructors and custom functions to define the type of the subcomponent props.

(1) Constructor custom type / / Custom function function Person (firstName, lastName) {this.firstName = firstName this.lastName = lastName} / / use Vue.component in child components ('blog-post', {props: {author: Person} / / use var obj = new Person in parent components ("1", "2")

In the above code, you first define a common custom constructor through which you can create an object. The instance object has two properties, firstName and lastName. The constructor is called in the parent component to create an obj instance and passed to the child component, and the prop of the constructor definition type of the child component receives the object.

(2) Custom function custom type / / custom function Vue.component ('blog-post', {props: {propsA: String,// must be a string type propsB: [String,Number], / / multiple optional types propsC: {type:Number,default:100} / / define the type and set the default value / / Custom validation function propsD: {validator: function (value) {/ / this value must match one of the following strings return ['success',' warning', 'danger'] .indexOf (value)! =-1}

Vue provides a very flexible way to customize the types of parameters received by child components, and the above code constrains the passing types of values in the parent component by customizing validation functions.

3. Unidirectional data flow problem

Unidirectional data flow is the core concept of parent-child components in vue, and props is unidirectionally bound. When the property value of the parent component changes, the corresponding change will be passed to the child component, thus forming an one-way downlink binding, and the property change of the parent component will flow to the downlink child component, but on the contrary, in order to prevent the child component from inadvertently modifying the data in the parent component and affecting the state of other child components, vue stipulates that the bottom-up data flow is not allowed.

When the property of the parent component changes, it will be passed to the child component, while the property change of the child component will not affect the parent component, so you may feel that props is a bit of a chicken rib, which can only be used when initializing the component, but cannot be operated within the child component, so we often have two kinds of boards to operate props: (1) define a local variable, initialize it with props, and operate this local variable later. (2) define a calculation property, process props and return.

Click me / / to define the subcomponent Vue.component ("blog-item", {props: ['title'], data () {return {}}, template: "

{{title}}

"}) / / parent component new Vue ({el:" # app ", data () {return {title1:" 111", title2: "222", title3:" 333 "}}, methods: {toclick () {this.title3 =" 000"})

/ / define subcomponents Vue.component ("blog-item", {props: ['title'], computed: {computedTitle () {return "computedTitle" + this.title}}, data () {return {subTitle: "subTitle" + this.title}}, template: "

{{title}} = {{subTitle}} = = {{computedTitle}}

"}) / / parent component new Vue ({el:" # app ", data () {return {title:" 111",}},},})

This is the end of the article on "sample analysis of vue parent-child components and one-way data flow problems". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.