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

Preface

Components are one of the most powerful functions of vue.js, and the scope of component instances is independent of each other, which means that data between different components cannot be referenced to each other. How to transfer data has also become one of the important knowledge points of components.

module

There are also different relationships between components. Father-son relationship and brotherly relationship (those who are not father and son are temporarily called brothers).

Original author: Lin Xin, author blog: https://github.com/lin-xin/blog

Parent and child components

The parent-child relationship is that component A uses component B in its template, so component An is the parent component and component B is the child component.

/ / Register a subcomponent Vue.component ('child', {data: function () {text:' I am a subcomponent of father!' } template:'{{text}}'}) / / registers a parent component Vue.component ('father', {template:' / / uses the child component} in the template)

When using father components directly:

The page will render: I am a sub-component of father!

The father component uses the child component in the template, so it is the parent component, and the child component is used, so the child component is the child component.

Sibling component

If the two components do not reference each other, they are sibling components.

Vue.component ('brother1', {template:' I am the eldest brother'}) Vue.component ('brother2', {template:' I am the younger brother'})

When using components:

The page will render:

I'm the big brother.

I'm a little brother.

Prop

If the child component wants to use the data of the parent component, we need to get the data passed by the parent component through the props option of the child component. Below I use the format in the .vue file to write the example.

How to transfer data

The child component child.vue is referenced in the parent component father.vue, passing the value of name to the child component.

/ / message is defined in the props of the subcomponent import child from'. / child.vue'; export default {components: {child}, data () {return {name: 'linxin'}

Declare the data it expects to get in the props option in the subcomponent child.vue

Hello `message` export default {/ / declare in props that the data of the parent component is passed to props through message: ['message']}

Then the page will render: Hello linxin

Unidirectional data flow

When the name of the parent component changes, the child component automatically updates the view. But in the subcomponents, let's not modify the prop. If you have to modify the data, you can use the following methods:

Method 1: assign prop to a local variable, and then modify the local variable if you need to modify it without affecting prop

Export default {data () {newMessage: null}, props: ['message'], created () {this.newMessage = this.message;}}

Method 2: deal with prop in the calculation attribute

Export default {props: ['message'], computed {newMessage () {return this.newMessage +' ';} Custom event

Prop is one-way bound: when the properties of the parent component change, it is passed to the child component, but not vice versa. Modifying the prop value of a child component will not be passed back to the parent component to update the view. So how can the child component communicate with the parent component?

That's a custom event. By listening for a custom event in the parent component $on (eventName), when the $emit (eventName) in the child component triggers the custom event, the parent component performs the appropriate action.

For example, to control the display of a pop-up box child component in the parent component, after pressing close in the child component, tell the parent component to hide it, and then the parent component performs the operation to hide the pop-up box.

/ / hide is a custom event. The name can be chosen freely and cannot have uppercase letters. If you can use the dash / / @ hide listening subcomponent to trigger the hide event, the hideDialog method will be executed to display the pop-up box import dialog from'. / dialog.vue' Export default {components: {dialog}, data () {return {show: false}}, methods: {showDialog () {this.show = true;}, hideDialog () {this.show = false }}}

In the subcomponent dialog.vue:

Here are the pop-box subcomponents.

Turn off the pop-up box export default {/ / hump named prop needs to be converted to the corresponding short horizontal line separated is-show props: ['isShow'], methods: {toHide () {/ / $emit method triggers the parent component's listening event this.$emit (' hide');}

In this way, the communication between parent and child components is realized.

Vuex

The above examples are all based on the components of parent-child relationships, but for other levels of relationships, it is more cumbersome to implement. Then Vuex can help you communicate with each other in real time at this time.

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.