Vue中的传值方式有哪些?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
1,父传子
子组件中定义<代码>道具> HelloWorld> 代码赋值,子组件<代码> HelloWorld 定义<代码>道具> 标题>
父组件
& lt; template>
,& lt; div>
,& lt; HelloWorld : title=癿sg",/比;
,& lt;/div>
& lt;/template>
& lt; script>
import HelloWorld 得到“. ./组件/HelloWorld.vue";
export default {
,名字:“Home",
,数据(){
,return {
,,味精:“搜索音乐“,
,};
},
,组件:{
HelloWorld,
},
}；
& lt;/script> 子组件
& lt; template>
,& lt; div 类=癶ello"比;
,& lt; h2> {{, title }} & lt;/h2>
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,名字:“HelloWorld",
,道具(“title"):,
,数据(){
,return , {};
},
}；
& lt;/script> 2,子传父
子传父,需要在子组件中触发一个事件,在事件中,调用<代码>释放美元(& # 39;父组件的方法名& # 39;,& # 39;传递的值& # 39;)>
子组件
& lt; template>
,& lt; div 类=癶ello"比;
,& lt; h2 @click=癮dd"在{{,title }} & lt;/h2>
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,名字:“HelloWorld",
道具:大敌;[“title"],
,数据(){
,return {
,年龄:18
,};
},
,方法:{
,add () {
美元。才能发出(“childEvent",, this.age);
,}
},
}；
& lt;/script> 父组件
& lt; template>
,& lt; div>
,& lt; HelloWorld @childEvent=皃arentEvent",: title=癿sg",/比;
,& lt;/div>
& lt;/template>
& lt; script>
import HelloWorld 得到“. ./组件/HelloWorld.vue";
export default {
,名字:“Home",
,数据(){
,return {
,,味精:“搜索音乐“,
,};
},
,方法:{
,parentEvent (e), {
console.log才能(e);
},
},
,组件:{
HelloWorld,
},
}；
& lt;/script> 3,兄弟组件传值
1,先新建一个<代码> bus.js 文件,在<代码>公共汽车。js代码里新<代码> 一个<代码> Vue 实例,充当传输数据的中间层。
import Vue 得到& # 39;Vue # 39;;
export default new Vue; 2,在组件一个中引入<代码> bus.js> 汽车。美元发出(& # 39;事件名& # 39;,& # 39;参数& # 39;)传递参数
& lt; template>
,& lt; div 类=癶ello"比;
,& lt; h2 @click=癮dd"在{{,title }} & lt;/h2>
,& lt;/div>
& lt;/template>
& lt; script>
import bus 得到“. ./publicFn/bus.js";
export default {
,名字:“HelloWorld",
道具:大敌;[“title"],
,数据(){
,return {
,年龄:18
,};
},
,方法:{
,add () {
公共汽车。才能释放美元(“childEvent",, this.age);
,}
},
}；
& lt;/script> 3,在B组件<代码> 周安装期中使用<代码>在美元(& # 39;事件名& # 39;,函数(){})接收
& lt; template>
,& lt; div id=& # 39;偷窃者# 39;比;
,& lt; button>我是按钮& lt;/button>
,& lt;/div>
& lt;/template>
& lt; script>
import bus 得到“. ./publicFn/bus.js";
export default {
,名字:& # 39;偷窃者# 39;
,data () {
,return {
,}
},
,安装(){
总线。美元(“childEvent",, (e),=祝辞,{
console.log才能(e)
,})
,}
}
& lt;/script>
