Rumah > hujung hadapan web > View.js > teks badan

Apakah lima cara untuk menghantar nilai dalam komponen vue?

青灯夜游
Lepaskan: 2021-10-27 16:16:25
asal
56482 orang telah melayarinya

Lima cara untuk menghantar nilai dalam komponen Vue: 1. Lulus nilai daripada komponen induk kepada komponen anak 2. Lulus nilai daripada komponen anak kepada komponen induk 3. Lulus parameter antara adik beradik yang bersebelahan; komponen; 4. Parameter dilalui antara komponen adik beradik yang jauh 5. Parameter EventBus diluluskan.

Apakah lima cara untuk menghantar nilai dalam komponen vue?

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Kaedah komunikasi Vue juga boleh dikatakan sebagai kaedah lulus parameter:

  • Komponen induk menghantar nilai kepada komponen anak:

  • Komponen anak menghantar nilai kepada komponen induk:

  • Pas parameter antara komponen adik beradik bersebelahan (saudara lelaki)

  • Melepasi parameter daripada saudara jauh (sepupu)

  • EventBus lulus parameter

1. Prinsip lulus parameter daripada bapa kepada anak lelaki

: Ibu bapa mengawal anak melalui atribut props komponen anak, ia membuang atribut label tersuai komponen anak untuk menerima status pengendalian komponen induk
Contoh: Butang dalam kawalan ibu bapa. paparan dan penyembunyian p dalam komponen anak

<!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>
Salin selepas log masuk

Kesan:

Apakah lima cara untuk menghantar nilai dalam komponen vue?

2. Melepasi parameter daripada ibu bapa kepada anak

Prinsip: Kanak-kanak mengawal ibu bapa, pengikatan komponen anak adalah Peristiwa tersuai, untuk mengendalikan fungsi kaedah komponen induk dan mencetuskan acara tersuai anda sendiri melalui .$emit('peristiwa tersuai', [parameter])
Contoh: butang dalam komponen anak mengawal butang dalam komponen induk Tunjukkan dan sembunyikan p

<!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>
Salin selepas log masuk

Kesan:

Apakah lima cara untuk menghantar nilai dalam komponen vue?

3. Melepasi parameter daripada saudara bersebelahan (saudara lelaki) )

Prinsip: Lulus Elemen induk awam berfungsi sebagai jambatan (komponen contoh), digabungkan dengan pemindahan parameter props ibu bapa-anak dan acara tersuai anak-ibu bapa

Contoh: c1 dan c2 adalah saudara . c1 boleh mengawal paparan dan menyembunyikan elemen dalam 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">
父级状态
<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>
Salin selepas log masuk

Kesan:

Apakah lima cara untuk menghantar nilai dalam komponen vue?

4 Melewati parameter daripada saudara jauh (sepupu)

Prinsip: Daftar acara dengan mencipta contoh perantaraan, Dalam komponen terkawal, fungsi yang akan dilaksanakan dibawa melalui acara Dalam komponen kawalan utama, operasi yang sepadan ditukar melalui acara

Apakah lima cara untuk menghantar nilai dalam komponen vue?

<!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>
Salin selepas log masuk

Kesan:

Sebelum mengklik:

Apakah lima cara untuk menghantar nilai dalam komponen vue?
Selepas mengklik:

Apakah lima cara untuk menghantar nilai dalam komponen vue?

5. Pemindahan parameter EventBus

1 Pasangkan EventBus global dalam main.js

Vue.prototype.$EventBus = new Vue()
Salin selepas log masuk

2.Satu komponen

.
<template>
    <div class="wrap">
        <div>我是组件A</div>
        <button @click="sendMsg">发送</button>
    </div>
</template>

<script>
    export default {
        name: "A",
        methods:{
            sendMsg(){
               this.$EventBus.$emit(&#39;sendMsg&#39;,"这是组件A发送的消息!")
            }
        }
    }
</script>
Salin selepas log masuk

Komponen 3.B

<template>
    <div>
        <div>我是组件B</div>
    </div>
</template>

<script>
    export default {
        name: "B",
        mounted(){
            this.$EventBus.$on(&#39;sendMsg&#39;,(msg)=>{
                console.log(msg);//这是组件A发送的消息!
            })
        },
    }
</script>
Salin selepas log masuk

Lepasi parameter dengan memasang objek Vue global.

Cadangan berkaitan: "tutorial vue.js"

Atas ialah kandungan terperinci Apakah lima cara untuk menghantar nilai dalam komponen vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan