ホームページ > 記事 > ウェブフロントエンド > Vue コンポーネントで値を渡す 5 つの方法とは何ですか?
Vue コンポーネントで値を渡す 5 つの方法とは何ですか?
- 青灯夜游オリジナル
- 2021-10-27 16:16:2556457ブラウズ
vue コンポーネントで値を渡す 5 つの方法: 1. 親コンポーネントが子コンポーネントに値を渡す; 2. 子コンポーネントが親コンポーネントに値を渡す; 3. 隣接する兄弟コンポーネント間でパラメータを渡す; 4. パラメータは遠く離れた兄弟コンポーネント間で渡されます; 5. EventBus パラメータが渡されます。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
Vue の通信メソッドはパラメータ渡しメソッドとも言えます:
親コンポーネントが子コンポーネントに値を渡します:
サブコンポーネントは親コンポーネントに値を渡します:
隣接する兄弟コンポーネント (兄弟) 間でパラメータを渡します
からパラメータを渡します遠い兄弟 (いとこ)
EventBus によるパラメータの受け渡し
1. 父から息子へのパラメータの受け渡し
原則: 親は子を制御します。子コンポーネントの props 属性を通じて、子コンポーネントのカスタム label 属性をスローして、親コンポーネントの動作ステータスを受け取ります。
例: 親コンポーネントのボタンは、コンポーネントの表示と非表示を制御します。子コンポーネントの p
<!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>効果:
2. 親から子へのパラメータの受け渡し
原則: 子は、親コンポーネントであり、子コンポーネントはカスタム イベントをバインドします。親コンポーネントのメソッド関数を処理するには、.$emit('カスタム イベント',[パラメータ])
を通じて独自のカスタム イベントをトリガーします。例: 子コンポーネントのボタン親コンポーネントの p を制御します。 Hide
<!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>Effect:
3. 隣接する兄弟 (兄弟) からパラメータを渡す
原則:パブリック親を介して要素はブリッジ (インスタンス コンポーネント) として機能し、親子 props パラメーターの受け渡しと子親カスタム イベントと組み合わせて機能します。
例: c1 と c2 は兄弟です。c1 は表示と非表示を制御できます。 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>効果 ：
4. 遠い兄弟 (いとこ) からパラメータを渡す
原則: 中間オブジェクトを作成することによってインスタンスを作成し、イベントを登録する場合、制御コンポーネントでは、実行される機能はイベントを通じて実行され、メイン制御コンポーネントでは、対応する操作がイベントを通じて変更されます。 #
<!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>効果:
クリック前: 
##5。パラメータを渡す EventBus
1. main.js にグローバル EventBus をマウントします
Vue.prototype.$EventBus = new Vue()
2.A コンポーネント<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>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>グローバル Vue オブジェクトをマウントしてパラメータを渡します。
関連する推奨事項:「
vue.js チュートリアル」
以上がVue コンポーネントで値を渡す 5 つの方法とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。