Rumah >hujung hadapan web >View.js >Apakah lima cara untuk menghantar nilai dalam komponen vue?
Apakah lima cara untuk menghantar nilai dalam komponen vue?
- 青灯夜游asal
- 2021-10-27 16:16:2556519semak imbas
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.
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='change'>父按钮</button>
<hr>
<!-- ********** 自定义标签属性test,接收父级的state ************-->
<son :test='state'></son>
</div>
<template id="tp1">
<div>
<!-- ************ 调用自定义属性test **************-->
<div v-show='test'>我是子组件的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:['test']
}
}
})
</script>
</body>
</html>Kesan:
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='state'>father显示/隐藏</div>
<hr>
<!--************ 子组件c2自定义事件,执行父组件c1的方法函数change_f ***************** -->
<c2 @test='change_f'></c2>
</div>
</template>
<template id="c2">
<div>
<button @click='change_son'>子按钮</button>
</div>
</template>
<!-- 引入Vue.js框架文档，可在官方文档下载-->
<script src='../vue/vue.js'></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>Kesan:
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='change_f'></c1>
<hr>
<c2 :test_c2='state'></c2>
</div>
<template id="c1">
<div>这里是c1组件
<button @click='change_c1'>c1按钮</button>
</div>
</template>
<template id="c2">
<div>这里是c2组件,状态：{{test_c2}}
<div v-show='test_c2'>我是c2中的div</div>
</div>
</template>
<script src='../vue/vue.js'></script>
<script>
Vue.component("c2",{
template:"#c2",
props:['test_c2']
})
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>Kesan:
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
<!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='click_son1'>触发angle中间事件</button>
</div>
</template>
<template id="son2">
<div>
{{name}}
</div>
</template>
<script src='../vue/vue.js'></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('test','哈哈！修改成功！')
}
}
},
son2:{
template:"#son2",
data(){
return {
name:"我是son2"
}
},
methods:{
change(val){
this.name = val;
}
},
//生命周期，自动执行，组件准备ok就可用
mounted(){
// *************** 通过angel注册的test事件，将son1的修改方法传过去 ************
angel.$on('test',this.change)
}
}
}
}
}
})
</script>
</body>
</html>Kesan:
Sebelum mengklik:
Selepas mengklik:
5. Pemindahan parameter EventBus
1 Pasangkan EventBus global dalam main.js
Vue.prototype.$EventBus = new Vue()
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('sendMsg',"这是组件A发送的消息！")
}
}
}
</script>Komponen 3.B
<template>
<div>
<div>我是组件B</div>
</div>
</template>
<script>
export default {
name: "B",
mounted(){
this.$EventBus.$on('sendMsg',(msg)=>{
console.log(msg);//这是组件A发送的消息！
})
},
}
</script>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!
Artikel berkaitan
Lihat lagi- Mari kita bincangkan tentang cara membuat aplikasi satu halaman SPA dengan Laravel8 Vuejs
- Bagaimana untuk memanggil kaedah komponen anak dalam komponen induk vue
- Bagaimana untuk melaksanakan lompatan laluan dan hantaran nilai dalam vuejs
- Perbincangan ringkas tentang cara mengkonfigurasi dan menggunakan templat kod .vue dalam vscode
- Apakah kaedah lompat penghalaan Vue?
- Apakah alat pembangunan vue?