So übergeben Sie einen Wert an die Vue-Komponente

Vue-Komponenten geben den Wert auf folgende Weise weiter: 1. Weitergabe vom Sohn an den Vater 3. Weitergabe des Werts mit Fragezeichen, Doppelpunkt und Eltern-Kind-Komponente; . Verwenden Sie „$ref“, um den Wert zu übergeben. 6. Verwenden Sie „inject“, um die Daten der übergeordneten Komponente in die aktuelle Instanz einzufügen. 10. Wert an sessionStorage übergeben; 11. vuex.

1. Übergeben Sie die übergeordnete Komponente an die untergeordnete Komponente. Definieren Sie Requisiten in der untergeordneten Komponente, d. h. props:['msg'], msg kann ein Objekt oder ein grundlegender Datentyp sein Sie möchten einen Standardwert definieren, also props: {msg: {type: String, default: 'hello world'}},

Wenn der Standardwert ein Objekttyp ist: props: { msg: { type: Object , Standard: () => { return { name: 'dan_seek' } } }}

Es ist zu beachten, dass diese Wertübertragung nur in eine Richtung erfolgt. Sie können den Wert der übergeordneten Komponente nicht ändern (außer bei Referenztypen von natürlich); und wenn Sie den Wert von Requisiten direkt ändern, wird eine Warnung angezeigt.

Die empfohlene Schreibweise besteht darin, eine Variable in data() (siehe Children.vue) neu zu definieren und ihr Requisiten zuzuweisen. Natürlich sind auch berechnete Eigenschaften akzeptabel.

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. Übergeben Sie die untergeordnete Komponente an die übergeordnete Komponente. Sie müssen hier ein benutzerdefiniertes Ereignis verwenden. Verwenden Sie this.$emit('myEvent'), um es in der auszulösen Untergeordnete Komponente und dann in der übergeordneten Komponente @myEvent-Überwachung in der Komponente verwenden

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. Übergeben Sie Werte zwischen Geschwisterkomponenten

Verwenden Sie die Auslöse- und Überwachungsfunktionen von benutzerdefinierten Ereignissen emit, um einen öffentlichen Ereignisbus eventBus zu definieren, über den wir als Zwischenbrücke Werte an jede Komponente übergeben können. Und durch die Verwendung von eventBus können Sie Ihr Verständnis von Emission vertiefen.

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>

Es gibt auch eine Open-Source-Vue-Bus-Bibliothek auf Github, Sie können darauf verweisen: https://github.com/yangmingshan/vue -bus#readme

4. Übergeben Sie Werte zwischen Routen

i Verwenden Sie Fragezeichen, um Werte zu übergeben

Wenn Seite A zu Seite B springt, verwenden Sie dies.$router.push('/B?name=danseek' )

B-Seite kann dies $route.query.name verwenden, um den von Seite A übergebenen Wert zu erhalten.

Bitte beachten Sie den Unterschied zwischen Router und Route oben.

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

Auf Seite B können Sie diesen.$route .params.name übergeben, um den Wert des von der Route übergebenen Namens zu erhalten

iii Verwenden Sie die Eltern-Kind-Komponente, um den Wert zu übergeben

Da der Router-. Da die Ansicht selbst ebenfalls eine Komponente ist, können wir den Wert auch über die übergeordnete/untergeordnete Komponente übergeben und sie dann im entsprechenden Abschnitt zur Unterseite hinzufügen. Da die Route nach der Typaktualisierung nicht aktualisiert wird, können Sie die neueste Version nicht direkt abrufen Geben Sie value in den gemounteten Hook der Unterseite ein. Stattdessen müssen Sie watch verwenden.

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

5. Verwenden Sie $ref, um einen Wert zu übergeben

Verwenden Sie die Fähigkeit von $ref, eine ID für die untergeordnete Komponente zu definieren. Über diese ID kann die übergeordnete Komponente direkt auf die Methoden und Eigenschaften zugreifen eine untergeordnete Komponente 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>

Dann verweisen Sie auf Children.vue in der übergeordneten Komponente Parent.vue und definieren Sie das ref-Attribut

<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. Angenommen, die übergeordnete Komponente hat eine Methode getName(), die allen Nachkommen bereitgestellt werden muss. Mit der Option „provide“ können wir die Daten/Methoden angeben, die wir den Nachkommenkomponenten bereitstellen möchten. Dann können wir in jeder Nachkommenkomponente „inject“ verwenden, um die Daten einzufügen /Methoden der übergeordneten Komponente in die aktuelle Instanz:

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

Parent.vue

inject: ['getName']

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

7. Ahnenenkel $attrs

Normalerweise müssen Sie die Requisiten des Vaters als Zwischenübergang verwenden, aber in Auf diese Weise verfügt die Vaterkomponente über mehr Dinge, die nichts mit dem Geschäft der übergeordneten Komponente zu tun haben, und kann mit Hilfe von $attrs vereinfacht werden, und es besteht keine Notwendigkeit, den Vorfahren oder Enkel zu ändern Name: Großvater

Unterkomponente erhalten

Name des Großvaters:

Geschlecht des Großvaters: Männlich

Alter des Großvaters: 88

Hobby des Großvaters: Code

8, Vorfahr des Enkels

Mit der Hilfe von. $listeners Mittlere Ereignisse, der Enkel kann Benachrichtigen Sie bequem den Vorfahren. Codebeispiele finden Sie unter 7

9, $parent

Sie können die Instanz der übergeordneten Komponente über parent abrufen und dann über diese Instanz auf die Eigenschaften und Methoden der übergeordneten Komponente zugreifen Bruder Root. Sie können die Root-Komponenteninstanz erhalten.

Syntax:

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

Im Beispiel der Übergabe einer untergeordneten Komponente an eine übergeordnete Komponente können Sie also this.$parent.getNum(100) verwenden, um den Wert an die übergeordnete Komponente zu übergeben.

10. SessionStorage-Wertübertragung

sessionStorage ist ein globales Objekt des Browsers und die darin gespeicherten Daten werden gelöscht, wenn die Seite geschlossen wird. Mit dieser Funktion können wir eine Kopie der Daten auf allen Seiten teilen.

Syntax:

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

Hinweis: Es speichert Schlüssel-Wert-Paare, die nur String-Typen sein können. Wenn Sie Objekte speichern möchten, müssen Sie let objStr = JSON.stringify(obj) verwenden, um sie in Strings umzuwandeln Speichern Sie sie (verwenden Sie sie, wenn let obj = JSON.parse(objStr) in ein Objekt analysiert wird).

Ist es mühsam, solche Objekte zu speichern? Ich empfehle eine Bibliothek mit gutem Speicher, die sessionStorage kapselt, und Sie können deren API direkt zum Speichern von Objekten verwenden

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

11, vuex

Ich werde hier nicht vorstellen, wie man dieses berühmte Vuex verwendet, da es zu lang wäre, es klar zu schreiben ...

Wenn Sie nicht vorhaben, eine große einseitige Anwendung zu entwickeln, kann die Verwendung von Vuex sinnvoll sein umständlich und überflüssig. Es stimmt – wenn Ihre App einfach genug ist, müssen Sie Vuex wahrscheinlich nicht verwenden.

Das obige ist der detaillierte Inhalt vonSo übergeben Sie einen Wert an die Vue-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!