Heim > Artikel > Web-Frontend > Welche fünf Möglichkeiten gibt es, Werte in Vue-Komponenten zu übergeben?

Welche fünf Möglichkeiten gibt es, Werte in Vue-Komponenten zu übergeben?

青灯夜游Original: 2021-10-27 16:16:2556455Durchsuche

Fünf Möglichkeiten, Werte in Vue-Komponenten zu übergeben: 1. Die übergeordnete Komponente übergibt den Wert an die übergeordnete Komponente. 3. Parameter werden zwischen benachbarten Geschwisterkomponenten übergeben 5. Parameter über EventBus übergeben.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Vues Kommunikationsmethode kann auch als Parameterübergabemethode bezeichnet werden:

Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente:
Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente:
Benachbarte Geschwisterkomponenten, Parameterübergabe zwischen Brüdern (Brüdern)
Parameterübergabe von entfernten Brüdern (Cousins), EventBus-Parameterübergabe von Vater zu Sohn Das untergeordnete Attribut wirft über die Requisiten der untergeordneten Komponente das benutzerdefinierte Beschriftungsattribut der untergeordneten Komponente, um den Betriebsstatus der übergeordneten Komponente zu erhalten. Beispiel: Eine Schaltfläche im übergeordneten Element steuert das Anzeigen und Ausblenden eines p in der untergeordneten Komponente. Effekt :
2. Das Prinzip der Übergabe von Parametern vom übergeordneten zum untergeordneten Element

Beispiel: Eine Schaltfläche in einer untergeordneten Komponente steuert die Anzeige und das Ausblenden eines p in der übergeordneten Komponente

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<style>
    .div{
        width:200px;
        height:200px;
        background:pink;
    }
</style>

<body>
    <!-- 这里的app范围就是  子组件son  的父级 -->
    <div id="app">
        <button @click=&#39;change&#39;>父按钮</button>
        <hr>
        <!-- **********  自定义标签属性test,接收父级的state ************-->
        <son :test=&#39;state&#39;></son>
    </div>

    <template id="tp1">
        <div>
            <!-- ************  调用自定义属性test **************-->
            <div v-show=&#39;test&#39;>我是子组件的div</div>
        </div>
    </template>

    <script src="../vue/vue.js"></script>
    <script>
        // 局部定义  子组件son
        new Vue({
            el:"#app",
            data:{
                state:true
            },
            methods:{
                change(){
                    this.state = !this.state;
                }
            },
            components:{
                son:{
                    template:"#tp1",
                    //*********** 抛出自定义标签属性 ***************
                    props:[&#39;test&#39;]
                }
            }
        })
    </script>

</body>
</html>

Wirkung:

3. Übergabe von Parametern von benachbarten Brüdern (Brüder)

Welche fünf Möglichkeiten gibt es, Werte in Vue-Komponenten zu übergeben? Prinzip: Durch ein öffentliches übergeordnetes Element dient es als Brücke (Instanzkomponente), kombiniert mit der Übertragung von Parametern für Eltern-Kind-Requisiten und benutzerdefinierten Ereignissen zwischen Kind und Eltern.

Beispiel: c1 und c2 sind Bruderbeziehungen, die c1 steuern kann das Anzeigen und Ausblenden von Elementen in c2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<style>
    .div{
        width:200px;
        height:200px;
        background:pink;
    }
</style>

<body>

<div id="app">
        <c1></c1> 
    </div>
    
     <!-- 父组件c1   子组件c2   子组件自定义事件test-->

    <template id="c1">
        <div>
            <div v-show=&#39;state&#39;>father显示/隐藏</div>
            <hr>
            <!--************ 子组件c2自定义事件,执行父组件c1的方法函数change_f ***************** -->
            <c2 @test=&#39;change_f&#39;></c2>
        </div>
    </template>

    <template id="c2">
        <div>
            <button @click=&#39;change_son&#39;>子按钮</button>
        </div>
    </template>

<!-- 引入Vue.js框架文档，可在官方文档下载-->
<script src=&#39;../vue/vue.js&#39;></script>
<script>
    //全局定义
    // 实例化 父组件c1
    Vue.component("c1",{
        template:"#c1",
        data(){
            return {
                state:true
            }
        },
        methods:{
            change_f(){
                this.state = !this.state;
            }
        }
    })
    // 实例化 子组件c2
    Vue.component("c2",{
        template:"#c2",
        methods:{
            change_son(){
                // ************ 在子组件方法里，触发子组件自定义事件 ******************
                this.$emit("test")
            }  
        }
    })
    //实例化一个Vue对象
new Vue({
        el:"#app"
    })
</script>
</body>
</html>

Effekt:

4. Übergabe von Parametern von entfernten Brüdern (Cousins) Welche fünf Möglichkeiten gibt es, Werte in Vue-Komponenten zu übergeben?

Prinzip: Durch Erstellen einer Zwischeninstanz, Registrieren eines Ereignisses in der gesteuerten Komponente, wird die Funktion an ausgeführt werden, wird durch das Ereignis durchgeführt, und in der Hauptsteuerungskomponente wird der entsprechende Vorgang durch das Ereignis geändert 5. EventBus übergibt Parameter

1. Mounten Sie den globalen EventBus in main.js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<style>
.div{
width:200px;
height:200px;
background:pink;
}
</style>

<body>
<div id="app">
父级状态
<p>{{state}}</p>
<hr>
<c1 @test_c1=&#39;change_f&#39;></c1>
<hr>
<c2 :test_c2=&#39;state&#39;></c2>
</div>

<template id="c1">
<div>这里是c1组件
<button @click=&#39;change_c1&#39;>c1按钮</button>
</div>
</template>

<template id="c2">
<div>这里是c2组件,状态：{{test_c2}}
<div v-show=&#39;test_c2&#39;>我是c2中的div</div>
</div>
</template>

<script src=&#39;../vue/vue.js&#39;></script>
<script>

Vue.component("c2",{
template:"#c2",
props:[&#39;test_c2&#39;]
})

Vue.component("c1",{
template:"#c1",
methods:{
change_c1(){
this.$emit("test_c1")
}
}
})

new Vue({
el:"#app",
data:{
state:true
},
methods:{
change_f(){
this.state = !this.state;
}
}
})
</script>
</body>
</html>

2. Eine Komponente

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
这是父组件
<hr>
<son1></son1>
<hr>
<son2></son2>
</div>
</template>
<template id="son1">
<div>
{{name}}
<button @click=&#39;click_son1&#39;>触发angle中间事件</button>
</div>
</template>
<template id="son2">
<div>
{{name}}
</div>
</template>

<script src=&#39;../vue/vue.js&#39;></script>
<script>
//********** 创建一个angle实例，作为中间变量(全局) **************
let angel = new Vue();

new Vue({
el:"#app",
components:{
father:{
template:"#father",
components:{
son1:{
template:"#son1",
data(){
return {
name:"我是son1"
} 
},
methods:{
click_son1(){
// ***************  通过angel注册的test事件，修改son2中name的值 ************
angel.$emit(&#39;test&#39;,&#39;哈哈！修改成功！&#39;)
}
}
},
son2:{
template:"#son2",
data(){
return {
name:"我是son2"
}
},
methods:{
change(val){
this.name = val;
}
},
//生命周期，自动执行，组件准备ok就可用
mounted(){
// ***************  通过angel注册的test事件，将son1的修改方法传过去 ************
angel.$on(&#39;test&#39;,this.change)
}
}
}
}
}
})
</script>

</body>
</html>

Vue.prototype.$EventBus = new Vue()

übergibt Parameter durch Mounten des globalen Vue-Objekts.

Welche fünf Möglichkeiten gibt es, Werte in Vue-Komponenten zu übergeben? Verwandte Empfehlungen: „

vue.js Tutorial

“

Das obige ist der detaillierte Inhalt vonWelche fünf Möglichkeiten gibt es, Werte in Vue-Komponenten zu übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So löschen Sie Eslint in VueJSNächster Artikel：So löschen Sie Eslint in VueJS

In Verbindung stehende Artikel

Mehr sehen