Façons de transmettre des valeurs dans les composants vue_Quelles sont les façons de transmettre des valeurs dans les composants vue-Problème commun-php.cn

Les composants Vue transmettent la valeur des manières suivantes : 1. Transmettent la valeur avec le point d'interrogation, le deux-points et le composant parent-enfant ; . Utilisez "$ref" pour transmettre la valeur ; 6. Utilisez "inject" pour injecter les données du composant parent dans l'instance actuelle ; 7. Passez de l'ancêtre au petit-enfant 8. Passez du petit-fils à l'ancêtre ; 10. Transmettez la valeur à sessionStorage ; 11. vuex.

Comment transmettre une valeur au composant vue

1. Transmettez le composant parent au composant enfant

Définissez un props 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 : Object , 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 de bien sûr) ; et si vous modifiez directement la valeur des props, un warn.

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>

Copier après la connexion

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>

Copier après la connexion

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 dans le composant parent Utilisez la surveillance @myEvent dans le composant

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>

Copier après la connexion

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>

Copier après la connexion

3 Transmettez les valeurs entre les composants frères

Utilisez les capacités de déclenchement et de surveillance de l'événement personnalisé. émettre pour définir un bus d'événements public eventBus, à travers lequel En tant que 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 &#39;vue&#39;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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

4. Transmettez les valeurs entre les routes

i. Utilisez des points d'interrogation pour transmettre des valeurs

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

La page B peut utiliser ceci $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. Utilisez deux points pour transmettre la valeur

Configurez la route suivante :

{
    path: &#39;/b/:name&#39;,
    name: &#39;b&#39;,
    component: () => import( &#39;../views/B.vue&#39;)
  },

Copier après la connexion

Sur la page B, vous pouvez transmettre this.$route .params.name pour obtenir la valeur du nom transmis par la route

iii Utilisez le composant parent-enfant pour transmettre la valeur

Depuis le routeur-. La vue elle-même est également un composant, nous pouvons également utiliser le composant parent-enfant pour transmettre la valeur, puis ajouter des accessoires à la sous-page correspondante. Parce que l'itinéraire n'est pas actualisé après la mise à jour du type, vous ne pouvez pas obtenir directement la dernière. tapez la valeur dans le hook monté de la sous-page, vous devez plutôt utiliser watch.

<router-view :type="type"></router-view>
// 子页面
......
props: [&#39;type&#39;]
......
watch: {
            type(){
                // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
            },
        },

Copier après la connexion

5. Utilisez $ref pour transmettre la valeur

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

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

Copier après la connexion

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>

Copier après la connexion

6. Utilisez l'injection de dépendances pour le transmettre aux descendants et arrière-petits-enfants

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

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

Copier après la connexion

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 le données/méthodes du composant parent dans l'instance actuelle :

inject: [&#39;getName&#39;]

Copier après la connexion

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>

Copier après la connexion

Children.vue


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

Copier après la connexion

7 Petit-fils ancestral $attrs

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

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Afficher les résultats

Composant parent reçu

Nom du grand-père : grandParent

Sous-composant reçu

Nom du grand-père :

Grand-père' Sexe : Homme

Âge du grand-père : 88

Le passe-temps du grand-père : code

8, l'ancêtre du petit-fils

Avec l'aide de $listeners middle Events, le petit-fils peut facilement informer l'ancêtre. Pour des exemples de code, voir 7

9, $parent

Vous pouvez obtenir le parent. instance du composant via le parent, puis vous pouvez accéder aux propriétés et aux méthodes du composant parent via cette instance. Il a également une racine frère. Vous pouvez obtenir l'instance du composant racine.

Syntaxe :

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

Copier après la connexion

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 est un objet global du navigateur, et les données qui y sont stockées seront effacées à la fermeture de la page. Grâce à cette fonctionnalité, nous pouvons partager une copie des données sur toutes les pages.

Syntaxe :

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

Copier après la connexion

Remarque : Il stocke les paires clé-valeur, qui ne peuvent être que de type chaîne. Si vous souhaitez stocker des objets, vous devez utiliser let objStr = JSON.stringify(obj) pour les convertir en chaînes et. puis stockez-les (à utiliser lorsque let obj = JSON.parse(objStr) analyser dans un objet).

Est-ce gênant de stocker des objets comme celui-ci ? Je recommande une bibliothèque good-storage, qui encapsule sessionStorage, et vous pouvez directement utiliser son API pour stocker des objets

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

Copier après la connexion

11, vuex

Je ne vais pas vous présenter ici comment utiliser cette fameuse vuex, car ce serait trop long de l'écrire clairement...

Si vous n'envisagez pas de développer une grosse application monopage, utiliser Vuex peut être encombrant et redondant. C'est vrai : si votre application est assez simple, vous n'avez probablement pas besoin d'utiliser 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!