How to pass data between vue.js components

Preface

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

Component

There are different relationships between components. The relationship between father and son and brother (those who are not father and son are temporarily called brothers).

Original author: Lin Xin, author's blog:

Parent-child component

The parent-child relationship is that component A uses component B in its template, then component A is the parent. Component, component B is the sub-component.

// 注册一个子组件Vue.component(&#39;child&#39;, {data: function(){text: &#39;我是father的子组件！&#39;}template: &#39;<span>{{ text }}</span>&#39;})// 注册一个父组件Vue.component(&#39;father&#39;, {template: &#39;<div><child></child></div>&#39;  // 在模板中使用了child组件})

When using the father component directly:

<div id="app"><father></father></div>

The page will render: I am the child 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 components

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

Vue.component(&#39;brother1&#39;, {template: &#39;<div>我是大哥</div>&#39;})Vue.component(&#39;brother2&#39;, {template: &#39;<div>我是小弟</div>&#39;})

When using the component:

<div id="app"><brother1></brother1><brother2></brother2></div>

The page will render:

I am the big brother

I am a younger brother

Prop

If a child component wants to use the data of the parent component, we need to obtain 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 pass data

Reference the child component child.vue in the parent component father.vue, and pass the value of name to the child component.

<template><div class="app">// message 定义在子组件的 props 中<child :message="name"></child></div></template><script>import child from &#39;./child.vue&#39;;export default {components: {child},data() {return {name: &#39;linxin&#39;}}}</script>

Declare the data it expects to obtain in the props option in the child component child.vue

<template><span>Hello {{message}}</span></template><script>export default {// 在 props 中声明获取父组件的数据通过 message 传过来props: [&#39;message&#39;]}</script>

Then the page will be rendered ：Hello linxin

One-way data flow

When the name of the parent component changes, the child component will automatically update the view. But in child components, we don't want to modify props. If you must modify these data, you can use the following method:

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: Process prop in calculated properties

export default {props: ['message'],computed{newMessage(){return this.newMessage + ' 哈哈哈';}}}

Custom events

prop is one-way bound: When the properties of the parent component change, they will be propagated to the child component, but not the other way around. Modifying the prop value of a child component will not be passed back to the parent component to update the view. So how do child components communicate with parent components?

That is a custom event. By listening to the custom event in the parent component $on(eventName), when $emit(eventName) in the child component triggers the custom event, the parent component performs the corresponding operation.

For example, if you control the display of a pop-up subcomponent in the parent component, after pressing Close in the sub-component, tell the parent component to hide it, and then the parent component will perform the operation to hide the pop-up box.

<template><div class="app">// hide 为自定义事件，名字可以自己随便起，不能有大写字母，可以使用短横线
        // @hide 监听子组件触发 hide 事件，则会执行 hideDialog 方法<dialog :is-show="show" @hide="hideDialog"></dialog><button @click="showDialog">显示弹框</button></div></template><script>import dialog from &#39;./dialog.vue&#39;;export default {components: { dialog },data() {return {show: false}},methods: {showDialog() {this.show = true;},hideDialog() {this.show = false;}}}</script>

In the child component dialog.vue:

<template><div class="dialog" v-show="isShow"><p>这里是弹框子组件</p><button @click="toHide">关闭弹框</button></div></template><script>export default {// 驼峰式命名的 prop 需要转换为相对应的短横线隔开式 is-showprops: [&#39;isShow&#39;],methods: {toHide(){// $emit 方法触发父组件的监听事件this.$emit(&#39;hide&#39;);}}}</script>

This achieves mutual communication between parent and child components.

Vuex

The above examples are all based on components of the parent-child relationship, but for other levels of relationships, it is more cumbersome to implement. Then Vuex can better help you communicate in real time between various components. Regarding Vuex, you can check out my other article: Vuex modularizes the status management of to-do items

Summary

It is not necessary to use Vuex for component communication. For some simple Data transfer, prop can also be completed. This article mainly records some basic knowledge points about component parameter passing. For actual practice, you can refer to notepad as an example. Use prop to display and hide sub-components, and use vuex to implement data state management between components.

The above is the detailed content of How to pass data between vue.js components. For more information, please follow other related articles on the PHP Chinese website!