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

<template>
    <section>
        父组件传过来的消息是：{{myMsg}}
    </section>
</template>
<script>
    export default {
        name: "Children",
        components: {},
        props:[&#39;msg&#39;],
        data() {
            return {
                myMsg:this.msg
            }
        },
        methods: {}
    }
</script>

Parent.vue

<template>
  <div class="parent">
    <Children :msg="message"></Children>
  </div>
</template>
<script>
import Children from &#39;../components/Children&#39;
export default {
  name: &#39;Parent&#39;,
  components: {
      Children
  },
  data() {
      return {
          message:&#39;hello world&#39;
}
},
}
</script>

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

<template>
    <section>
        <br>
        <div @click="clickme">click me</div>
    </section>
</template>
<script>
    export default {
        name: "Children",
        components: {},
        data() {
            return {
                childNum:0
            }
        },
        methods: {
            clickme(){
                // 通过自定义事件addNum把值传给父组件
                this.$emit(&#39;addNum&#39;,this.childNum++)
            }
        }
    }
</script>

Parent.vue

<template>
    <div class="parent">
        这里是计数：{{parentNum}}
        <Children-Com @addNum="getNum"></Children-Com>
    </div>
</template>
<script>
    import ChildrenCom from &#39;../components/Children&#39;
    export default {
        name: &#39;Parent&#39;,
        components: {
            ChildrenCom
        },
        data() {
            return {
                parentNum: 0
            }
        },
        methods:{
            // childNum是由子组件传入的
            getNum(childNum){
                this.parentNum = childNum
            }
        }
    }
</script>

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
<template>    <section>        <div @click="pushMsg">push message</div>        <br>    </section></template><script>    import eventBus from &#39;./EventBus&#39;    export default {        name: "Children1",        components: {},        data() {            return {                childNum:0            }        },        methods: {            pushMsg(){            // 通过事件总线发送消息                eventBus.$emit(&#39;pushMsg&#39;,this.childNum++)            }        }    }</script>

Children2.vue

<template>
    <section>
        children1传过来的消息：{{msg}}
    </section>
</template>
<script>
    import eventBus from &#39;./EventBus&#39;
    export default {
        name: "Children2",
        components: {},
        data() {
            return {
                msg: &#39;&#39;
            }
        },
        mounted() {
        // 通过事件总线监听消息
            eventBus.$on(&#39;pushMsg&#39;, (children1Msg) => {
                this.msg = children1Msg
            })
        }
    }
</script>

Parent.vue

<template>
    <div class="parent">
        <Children1></Children1>
        <Children2></Children2>
    </div>
</template>
<script>
    import Children1 from &#39;../components/Children1&#39;
    import Children2 from &#39;../components/Children2&#39;
    export default {
        name: &#39;Parent&#39;,
        components: {
            Children1,
            Children2
        },
        data() {
            return {
            }
        },
        methods:{
        }
    }
</script>

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.

<router-view :type="type"></router-view>
// 子页面
......
props: [&#39;type&#39;]
......
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

<template>
    <section>
        传过来的消息：{{msg}}
    </section>
</template>
<script>
    export default {
        name: "Children",
        components: {},
        data() {
            return {
                msg: &#39;&#39;,
                desc:&#39;The use of ref&#39;
            }
        },
        methods:{
            // 父组件可以调用这个方法传入msg
            updateMsg(msg){
                this.msg = msg
            }
        },
    }
</script>

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

<template>
    <div class="parent">
        <!-- 给子组件设置一个ID ref="children" -->
        <Children ref="children"></Children>
        <div @click="pushMsg">push message</div>
    </div>
</template>
<script>
    import Children from &#39;../components/Children&#39;
    export default {
        name: &#39;parent&#39;,
        components: {
            Children,
        },
        methods:{
            pushMsg(){
                // 通过这个ID可以访问子组件的方法
                this.$refs.children.updateMsg(&#39;Have you received the clothes？&#39;)
                // 也可以访问子组件的属性
                console.log(&#39;children props:&#39;,this.$refs.children.desc)
            }
        },
    }
</script>

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

<template>
    <div class="parent">
        <Children></Children>
    </div>
</template>
<script>
    import Children from &#39;../components/Children&#39;
    export default {
        name: &#39;Parent&#39;,
        components: {
            Children,
        },
        data() {
            return {
                name:&#39;dan_seek&#39;
            }
        },
        provide: function () {
            return {
                getName: this.name
            }
        },
    }
</script>

Children.vue

<script>
    export default {
        name: "Children",
        components: {},
        data() {
            return {
            }
        },
        inject: [&amp;#39;getName&amp;#39;],
    }
</script>

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

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>
<script>
    import Parent from &#39;./Parent&#39;
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>

Parent.vue

<template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>
<script>
  import Children from &#39;./Children&#39;
  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:[&#39;name&#39;],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>

Children.vue

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <p>祖父的性别：{{sex}}</p>
    <p>祖父的年龄：{{age}}</p>
    <p>祖父的爱好：{{hobby}}</p>
    <button @click="sayKnow">我知道啦</button>
  </section>
</template>
<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性，所以name不会传到子组件了
    props:[&#39;sex&#39;,&#39;age&#39;,&#39;hobby&#39;,&#39;name&#39;],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit(&#39;sayKnow&#39;,&#39;我知道啦&#39;)
      }
    },
    mounted() {
    }
  }
</script>

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!