Example Analysis of values passed by vue components

This article mainly shows you the "sample analysis of passing values of vue components", which is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and study the "sample analysis of passing values of vue components".

Preface

We should be familiar with the value transfer of components in vue. Today, we use two simple and easy-to-understand cases to teach you how to pass data between parent and child in a project.

Realization idea

Parent-child: bind an attribute to the child component tag in the parent component, mount the value to be passed on the attribute, and receive data in the child component through props: ['custom attribute name'].

Child passing parent: define an event in the child component. After calling this event, the child component sends the data that the parent component can listen to through this.$emit ('custom event name', the data to be passed). Finally, the parent component listens to the child component event, invokes the event and receives the passed data.

Example 1: father passes from son to son

The main purpose of this small example is to simulate the situation in which the parent component transfers different data to different child components.

Parent component index.vue

/ / Import subcomponent import Child from ". / subassembly/seed.vue"; import Electronic from ". / subassembly/sons.vue"; export default {data () {return {typeCode: "0", / / determine which page to display by "0"1"; 0: subcomponent 1 page 1: subcomponent 2 page informtion: "I am the data passed to subcomponent 1", / / data to be passed to subcomponent 1 dataList: "I am the data passed to subcomponent 2", / / data to be passed to subcomponent 2};}, / / be sure to register component components: {Child, Electronic,},}

Subassembly 1 seed.vue

I am child component 1 to receive parent component values: {{informtion}} export default {data () {return {informtion: "", / / for assignment} }, props: {/ / message is used to receive message: {type: String, / / verify the type, and you can also verify other types of default: "", / / if the parent component passes a value, render with the value of the parent component, otherwise use the default value},}, mounted () {console.log (this.message) / / data passed by the parent component / / assignment operation let str = this.message; this.informtion = str;},}

Subassembly 2 sons.vue

I am child component 2 to receive parent component values: {{dataList}} export default {data () {return {dataList: "", / / for assignment} }, props: {/ / message is used to receive message: {type: String, / / verify the type, and you can also verify other types of default: "", / / if the parent component passes a value, render with the value of the parent component, otherwise use the default value},}, mounted () {console.log (this.message) / / data passed by the parent component / / assignment operation let str = this.message; this.dataList = str;},}

Realize the effect

1. When typeCode is "0", the content of the page is as follows:

two。 When typeCode is "1", the content of the page is as follows:

Example 2: the son passes on the father

The main purpose of this small example is to simulate the transfer of data from different child components to the parent component.

Seed.vue subcomponent 1

I am the child component 1export default {data () {return {seedCode: "Romantic never die!", / / the value to be passed by the parent};}, methods: {seedOnclick () {this.$emit ("seed", this.seedCode); / / Parameter 1: custom event; Parameter 2: value to be passed},},}

Sons.vue Sub-component 2

I am the child component 2export default {data () {return {dataListCode: "world peace!", / / the value to be passed by the parent};}, methods: {sonsOnclick () {this.$emit ("sons", this.dataListCode); / / Parameter 1: custom event; Parameter 2: value to be passed},},}

Index.vue parent component

/ / Import subcomponent import Child from ". / subassembly/seed.vue"; import Electronic from ". / subassembly/sons.vue"; export default {data () {return {typeCode: "0", / / determine which page to display by "0"1"; 0: subcomponent 1 page 1: child component 2 page};}, / / be sure to register component components: {Child, Electronic,}, methods: {seedAccept (data) {console.log (data, "value passed by child component 1 to parent component");}, sonsAccept (data) {console.log (data, "value passed to parent component by child component 2");},}

Realize the effect

1. When typeCode is "0", the content of the page is as follows:

two。 When typeCode is "1", the content of the page is as follows:

The above is all the contents of the article "sample Analysis of values passed by vue components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!