vue组件间的各种传值方法

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」     ，赢取创作大礼包，挑战创作激励金

Hello!掘金的小伙伴们大家好，我是 摸鱼小公举 ,昨天写了 # Vue的导出(export) 导入(import)的相关技术文章,希望大家可以预览一下,多给点建议,多多支持一下,谢谢!今天的文章内容是vue组件间的各种传值方法;在网上找了好多篇相关文章或文档总结出来的;希望对大家有用;

正文开始了~

父组件向子组件传值 ( 用得最多 )

实现方式

1,在 Vue 中，父组件可以使用props向子组件传递数据。(数据类型可以是Number,String,Boolearn,Array,Object)

子组件部分 codeDialog.vue

<template>
 <div>
  <h2>子组件</h2>
  <div v-if="showCode" class="Qr">
    <img :src="currentInfo.code_img" alt="" >
    <h5>{{ currentInfo.nickname }}</h5>
  </div>
  <div>
   <span>{{ num }}</span>
   <span>{{ content }}</span>
  </div>
  <div>
    <span v-for="(item, index) in isArray" :key="index">{{ item }}</span>
  </div>
 </div>
  
</template>
<script>
   export default {
  props: {
    showCode: {
    type: Boolean,
    default: false
    },
    num:{
    type:Number,
    defalut:0
    },
    content:{
    type:String,
    defalut:''
    },
    currentInfo: {
    type: Object,
    default: () => {}
    },
    isArray:{
    type:Array,
    defalut: ()=> []
    }
   
    
  }
}
</script>

父组件部分 index.vue

<template>
  <div>
    <h1>父组件</h1>
    <code-dialog :num="num" :context="context" :showCode="isShow" :isArray="isArray"     
    :currentInfo="currentInfo" />
    <!-- <code-dialog ></code-dialog> -->
  </div>
</template>
<script>
  import codeDialog from '../../components/codeDialog.vue'
  export default {
  components: { codeDialog },
  data(){
    return{
    num:2,
    context: "引入子组件",
    isShow: true,
    isArray: ["黄豆,红豆,绿豆,黑豆,豌豆"],
    currentInfo: {
     nickname: "爱客盛客服专员",
     code_img: require("@/assets/img/consult/07.png")
    }
   
   }
  }
}
</script>

效果图

预览效果如下

子组件向父组件传值

实现方式

在 Vue 中，子组件可以使用$emit向父组件传递数据

子组件部分

<template>
 <div>
  <h2>子组件</h2>
   <img  @click="childEvent" :src="currentInfo.code_img" alt="" >
 </div>
</template>

<script>
export default {
   methods:{
    childEvent(){
      this.$emit('showClick','子组件向父组件传值')
       }
  }
}
</script>

父组件部分

<template>
  <div>
    <h1>父组件</h1>
    <child  :num="num"  :context="context" :showCode="isShow" :isArray="isArray"  :currentInfo="currentInfo" @showClick="showText" />
     <div>{{message}}</div>
  </div>
</template>
<script>
export default {
data(){
  return{
  message:''
  }
},
 methods:{
  showText(e){
    this.message=e
  }
 }
}
</script>

效果图

bus.js 传值

实现方式:

需要同一个vue 实例来调用两个方法,所以建立一个中转站;利用bus.$emit来触发传值,再由bus.$on来接收值

应用场景

同级一个页面调用另一个页面的方法

也可运用于兄弟组件的传值

例如：类似淘宝或者拼多多的我的订单模块,从一级页面订单状态分类进入某类订单列表确认收货;再退出来更新未确认收货的数量的显示;

(1) 新建一个bus.js 文件

import Vue from 'vue';
export defalut new Vue ;

(2) 需要触发传值的页面 从这个页面离开

<template>
  <div>
    <h2>从此页面离开(触发传值)</h2>
    <div  class="Qr">
      <img src="../assets/消息.png" alt="" />
    </div>
  </div>
</template>
<script>
 import bus from './bus'
   export default {
   data(){
       return{
       }
   },
   beforeDestroy(){
      bus.$emit('msg','我要传值个另一个页面')
   },
}
</script>

(3) 需要接收值的页面 从这个页面去到上面的页面;再回到此页面

<template>
  <div>
    <h1 @click="$router.push('/child')">接收另一个页面传来的值</h1>
    <div>{{ message }}</div>
  </div>
</template>
<script>
import bus from "./bus";
export default {
  data() {
    return {
      message: ""
    };
  },
  created() {
    bus.$on("msg", (val)=>{
      this.message = val
    });
  }
};
</script>

效果图

来看一下传值过程效果图

兄弟组件件方法的调用

实现方式

在父组件同时引入2个子组件(child,child1),在child1里调用child组件里的某个方法

在child1里用this.$emit('fun')传到父组件

在父组件里,给child组件加上绑定一个ref ="childFirst"是属性

在methods里面定义function方法,让this.$refs.childFirst.某个方法()

父组件部分

<template>
  <div>
    <div>{{ message }}</div>
    <child ref="childFrist"></child>
    <child1 @save="save"></child1>
  </div>
</template>
<script>
import child from "./child.vue";
import child1 from "./child1.vue"
export default {
    components:{
        child,
        child1
    },
  methods:{
      save(){
          this.$refs.childFrist.fristEvent()
      }
  }
};
</script>

子组件部分

child组件部分

<template>
  <div>
    <h2>第一个子组件</h2>
  </div>
</template>
<script>
 export default {
 methods:{
           fristEvent(){
        console.log('第一个子组件;这里通常被调用的是列表接口的方法');
   },
   }
}
</script>
----------------------------------------------------------------------
child1组件部分

<template>
  <div>
    <h2>点击下面图片触发方法</h2>
    <div  class="Qr" @click="imgClick">
      <img src="../assets/消息.png" alt="" />
    </div>
  </div>
</template>
<script>
export default{
    methods:{
       imgClick(){
           this.$emit('save')
       }
    }
}
</script>

效果图

结语

好了文章到这又要结束了，感觉每次自己新写一篇技术文章，就等于将文章的前端知识再温习一遍；我记性不好总是能忘记语法；说白了语法能忘记就是少用；希望写这篇文章对大家有用；也希望大家多提建议多多支持；谢谢！

「欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」