How to pass value to vue component

The way to pass value in vue component: 1. Pass from father to son; 2. Pass from son to father; 3. Pass value from brother; 4. Pass value with question mark, colon and parent-child component; 5. Use " $ref" passes the value; 6. Use "inject" to inject the data of the parent component into the current instance; 7. Pass from ancestor to grandson; 8. Pass from grandson to ancestor; 9. $parent; 10. Pass value to sessionStorage; 11. vuex.

1. Pass the parent component to the child component

Define a props in the child component, that is, props:['msg'], msg It can be an object or a basic data type

If you want to define a default value, that is, props:{msg: {type: String, default: 'hello world'}},

If The default value is the object type: props: { msg: { type: Object, default: () => { return { name: 'dan_seek' } } }}

It should be noted that this type of value passing is One-way, you cannot change the value of the parent component (except for reference types, of course); and if you modify the value of props directly, a warning will be reported.

The recommended way to write is to redefine a variable in data() (see Children.vue) and assign props to it. Of course, calculated properties will also work.

Children.vue

Parent.vue

2. Pass the child component to the parent component

You need to use custom events here, in the child component Use this.$emit('myEvent') to trigger, and then use @myEvent to listen in the parent component

Children.vue

Parent.vue

3, Passing values between sibling components

Use the triggering and monitoring capabilities of custom event emit to define a public event bus eventBus. Through it as an intermediate bridge, we can pass values to any component. And through the use of eventBus, you can deepen your understanding of emit.

EventBus.js

import Vue from 'vue'export default new Vue() Children1.vue 

Children2.vue

Parent.vue

There is also an open source vue-bus library on github, you can refer to it below ： https://github.com/yangmingshan/vue-bus#readme

4. Passing values between routes

i. Use question marks to pass values

A page jump When using page B, use this.$router.push('/B?name=danseek')

Page B can use this.$route.query.name to get the value passed from page A

Please note the difference between router and route above

ii. Use colon to pass value

Configure the following route:

{ path: '/b/:name', name: 'b', component: () => import( '../views/B.vue') },

On page B, you can pass this.$route.params .name to get the value of the name passed in by the route

iii. Use the parent-child component to pass the value

Since the router-view itself is also a component, we can also use the parent-child component to pass the value. value, and then add props to the corresponding subpage. Because the route is not refreshed after the type is updated, you cannot directly obtain the latest type value directly in the mounted hook of the subpage, but use watch.

 // 子页面 ...... props: ['type'] ...... watch: { type(){ // console.log("在这个方法可以时刻获取最新的数据:type=",this.type) }, },

5. Use $ref to pass value

Use the ability of $ref to define an ID for the subcomponent. The parent component can directly access the methods and methods in the subcomponent through this ID. Attribute

First define a child component Children.vue

Then reference Children.vue in the parent component Parent.vue, and define the ref attribute

6. Use dependencies Injection to descendants and great-grandchildren

Suppose the parent component has a method getName() and needs to provide it to all descendants

provide: function () { return { getName: this.getName() } }

The provide option allows us to specify what we want to provide to descendant components Data/Methods

Then in any descendant component, we can use inject to inject the data/methods of the parent component into the current instance:

inject: ['getName']

Parent.vue

Children.vue

7, Ancestral grandson$attrs

Normally, you need to use the father's props as an intermediate transition, but in this way, the father component will have more things that have nothing to do with the business of the parent component. Attributes, high coupling, can be simplified with the help of $attrs, and neither ancestor nor grandchild needs to be modified

GrandParent.vue

Parent.vue

Children.vue

Display results

Parent component receives

Grandfather’s name: grandParent

Child component receives

Grandfather’s name:

Grandfather’s gender: Male

Grandfather’s age: 88

Grandfather’s hobbies: code

8, Sun Chuanzu

With the help of $ listeners intermediate events, Sun can conveniently notify the ancestor. For code examples, see 7

9, $parent

You can get the parent component instance through parent, and then you can access the properties of the parent component through this instance. and method, it also has a sibling root, which can obtain the root component instance.

Syntax:

// 获父组件的数据 this.$parent.foo // 写入父组件的数据 this.$parent.foo = 2 // 访问父组件的计算属性 this.$parent.bar // 调用父组件的方法 this.$parent.baz()

So, in the example of passing a child component to a parent component, you can use this.$parent.getNum(100) to pass the value to the parent component.

10. Pass value to sessionStorage

sessionStorage is a global object of the browser, and the data stored in it will be cleared when the page is closed. Using this feature, we can share a copy of data across all pages.

Syntax:

// 保存数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 let data = sessionStorage.getItem('key'); // 从 sessionStorage 删除保存的数据 sessionStorage.removeItem('key'); // 从 sessionStorage 删除所有保存的数据 sessionStorage.clear();

Note: Key-value pairs are stored in it, which can only be of string type. If you want to store objects, you need to use let objStr = JSON.stringify(obj) to convert into a string and then store it (when using let obj = JSON.parse(objStr) parse it into an object).

Is it troublesome to store objects like this? I recommend a library good-storage, which encapsulates sessionStorage and can directly use its API to store objects

// localStorage storage.set(key,val) storage.get(key, def) // sessionStorage storage.session.set(key, val) storage.session.get(key, val)

11, vuex

I’m not going to introduce how to use this famous vuex here, because it would be too long to write it clearly...

If you don’t plan to develop a large single-page application, using Vuex may be cumbersome and redundant. of. It's true - if your app is simple enough, you probably don't need to use Vuex.

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