Quels sont les moyens de transmettre des valeurs dans les composants vue ?

Méthode de transmission de la valeur du composant Vue : 1. Passez du parent à l'enfant, définissez "props" dans le composant enfant pour le recevoir ; 2. Passez de l'enfant au parent, utilisez "$emit()" pour déclencher dans le composant enfant. ; 3. Transmettez la valeur de Brother, définissez le bus d'événement "eventBus" ; 4. Point d'interrogation pour transmettre la valeur, deux points pour transmettre la valeur et le composant parent-enfant pour transmettre la valeur ; 5. Utilisez "$ref" pour transmettre la valeur ; "inject" pour injecter les données du composant parent dans l'instance actuelle ; 7. Passer de l'ancêtre au petit-enfant ; 9. $parent 10. Passage de la valeur SessionStorage ;

Le système d'exploitation de ce tutoriel : système Windows 10, vue version 3.0, ordinateur Dell G3.

1. Transmettez le composant parent au composant enfant

Définissez un accessoire dans le composant enfant, c'est-à-dire props :['msg'], msg peut être un objet ou un type de données de base

Si vous souhaitez définir une valeur par défaut, c'est-à-dire props :{msg : {type : String, default : 'hello world'}},

Si la valeur par défaut est un type d'objet : props : { msg : { type : Objet, par défaut : () => { return { name: 'dan_seek' } } }}

Il est à noter que ce transfert de valeur est à sens unique, vous ne pouvez pas modifier la valeur du composant parent (sauf pour les types référence bien sûr) ; et si vous modifiez directement la valeur des props, un avertissement vous sera signalé.

La méthode d'écriture recommandée est de redéfinir une variable dans data() (voir Children.vue) et de lui attribuer des accessoires. Bien entendu, les propriétés calculées sont également acceptables.

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. Passez le composant enfant au composant parent

Vous devez utiliser un événement personnalisé ici, utilisez this.$emit('myEvent') pour le déclencher. dans le composant enfant, puis utilisez la surveillance @myEvent dans le composant parent

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. Transmettez les valeurs entre les composants frères

Utilisez les capacités de déclenchement et de surveillance de la personnalisation. event émet pour définir un bus d'événements commun eventBus, à travers lui comme pont intermédiaire, nous pouvons transmettre des valeurs à n'importe quel composant. Et grâce à l'utilisation d'eventBus, vous pouvez approfondir votre compréhension d'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>

Il existe également une bibliothèque vue-bus open source sur github, vous pouvez vous y référer : https://github .com/yangmingshan /vue-bus#readme

4. Transmission de valeurs entre les itinéraires

i Utilisez des points d'interrogation pour transmettre des valeurs

Lorsque la page A passe à la page B, utilisez ceci.$router.push(. '/B?name=danseek')

La page B peut utiliser this.$route.query.name pour obtenir la valeur transmise à partir de la page A

Veuillez noter la différence entre le routeur et la route ci-dessus

ii. value

Configurez la route suivante :

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

Dans la page B, vous pouvez obtenir la valeur du nom transmis par la route via this.$route.params.name

iii Utilisez les composants parent-enfant pour transmettre les valeurs

Depuis. router-view lui-même est également un composant, nous pouvons également utiliser des composants parent-enfant pour transmettre des valeurs, puis ajouter des accessoires à la sous-page correspondante. Parce que la route n'est pas actualisée après la mise à jour du type, vous ne pouvez pas. obtenez directement la dernière valeur de type directement dans le hook monté de la sous-page, mais utilisez watch.

<router-view :type="type"></router-view>

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

5. Utilisez $ref pour transmettre la valeur

Utilisez la capacité de $ref pour définir un ID pour le sous-composant. Le composant parent peut accéder directement aux méthodes et propriétés du sous-composant via cet ID

Définissez d'abord. un sous-composant 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>

Puis référencez Children.vue dans le composant parent Parent.vue et définissez l'attribut ref

<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 Utilisez l'injection de dépendances pour le transmettre aux descendants et arrière-petits-enfants

Supposons le composant parent. a une méthode getName(), elle doit être fournie à tous les descendants

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

L'option provide nous permet de spécifier les données/méthodes que nous voulons fournir aux composants descendants

Ensuite, dans n'importe quel composant descendant, nous pouvons utiliser inject pour injecter les données du composant parent dans l'instance actuelle /Méthode :

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, petit-fils ancestral $attrs

Normalement, vous devez utiliser les accessoires du père comme intermédiaire transition, mais de cette façon, il y aura plus de composants père. Les attributs qui n'ont rien à voir avec l'activité du composant parent ont un degré élevé de couplage. Ils peuvent être simplifiés à l'aide de $attrs, et ni l'ancêtre ni le petit-fils n'en ont besoin. pour apporter des modifications.

Composant parent reçu

Nom du grand-père : grand-parent

Composant enfant reçu

Nom du grand-père :

Sexe du grand-père : Mâle

Âge du grand-père : 88

Loisirs du grand-père : code

8 , Sun Chuanzu

Avec l'aide des événements intermédiaires $listeners, Sun peut facilement informer Zu Pour des exemples de code, voir 7

9 $parent

Vous pouvez obtenir l'instance du composant parent via parent, puis accéder aux propriétés. du composant parent via cette instance et cette méthode, il a également une racine sœur, qui peut obtenir l'instance du composant racine.

Syntaxe :

<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>

Ainsi, dans l'exemple de transmission d'un composant enfant à un composant parent, vous pouvez utiliser this.$parent.getNum(100) pour transmettre la valeur au composant parent.

10. Transfert de valeur SessionStorage

sessionStorage 是浏览器的全局对象，存在它里面的数据会在页面关闭时清除 。运用这个特性，我们可以在所有页面共享一份数据。

语法：

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

注意：里面存的是键值对，只能是字符串类型，如果要存对象的话，需要使用 let objStr = JSON.stringify(obj) 转成字符串然后再存储（使用的时候 let obj = JSON.parse(objStr) 解析为对象）。

这样存对象是不是很麻烦呢，推荐一个库 good-storage ，它封装了sessionStorage ，可以直接用它的API存对象

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

更多请移步：https://github.com/ustbhuangyi/storage#readme

11、vuex

这里我也不打算介绍这个大名鼎鼎的vuex怎么用，因为要把它写清楚篇幅太长了…

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您也许不需要使用 Vuex。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!