vue组件传参，传方法

---

前言

提示：涉及到的方法 props ref eventbus 自定义事件 $parent $root

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件参数传递

1、父传子 props

在父组件上通过子组件的标签传递数据，在子组件上通过props:[]接受数据
父组件PropsParent2代码如下

<template>
   <div>
       <h2>Parent</h2>
       <PropsSon2 :title="data1" />
   </div>
</template>

<script>
import PropsSon2 from './PropsSon2'
export default {
    data(){
        return{
             data1:[
                 "迪丽热巴1",
                 "迪丽热巴2",
                 "迪丽热巴3",
                 "迪丽热巴4"
             ],
        }
    },
 components:{
     PropsSon2
 }
}
</script>

子组件PropsSon2代码如下

<template>
   <div>
       <h2>Son</h2>
       <p>标题：{{title}}</p>
       <h3>名字1:{{title[0]}}</h3>
       <!-- <h3>名字2:{{title.name2}}</h3>
       <h3>名字3:{{title.name3}}</h3>
       <h3>名字4:{{title.name4}}</h3> -->

       <h2 v-for='(item ,index) in "title"' :key="index">{{title[index]}}</h2>
   </div>
</template>

<script>
export default {
  name:'PropsSon',
  props:['title'],
}
</script>

2、父传子 provide inject

3、子组件获取父组件数据 父组件实例 $parent

在子组件中this.$parent.父组件中定义的数据
代码如下

this.$parent.xxxxxdata

4、子传父 自定义事件+props

父组件Props1.vue代码如下

<template>
  <div>
     <Son1 :title="title" @xxx="changeTitle"/>
  </div>
</template>

<script>
import Son1 from './Son1'
export default {
  data(){
      return{
          title:'这是父传子的标题'
          
      }
  },
  components:{
      Son1
  },
  methods:{
      changeTitle(cs){
          this.title = cs
      }
  }
}
</script>

<style>

</style>

子组件Son1.vue代码如下

<template>
  <div>
     <p>标题是：{{title}}</p> 
     <button @click="changeTitle">更改</button>
  </div>
</template>

<script>
export default {
 data(){
   return{

   }
 },
 props:["title"],
 methods:{
   changeTitle(){
     this.$emit('xxx','新标题')
   }
 }
}
</script>

<style>

</style>

二、组件方法传递

1.子组件调用父组件的方法 自定义事件

父组件在子组件的标签上自定义一个事件，子组件通过this.$emit(‘xxx’)来接收这个事件
父组件Props1.vue代码如下：

<template>
  <div>
      <p>{{title}}</p>
     <Son1 @xxx="changeTitle"/>
  </div>
</template>

<script>
import Son1 from './Son1'
export default {
  data(){
      return{
          title:'这是父传子的标题'
          
      }
  },
  components:{
      Son1
  },
  methods:{
      changeTitle(){
          this.title ="我是父组件的新的标题"
      }
  }
}
</script>
<style>
</style>

子组件Son1.vue代码如下：

<template>
  <div>
   <p>我是子组件</p>
     <button @click="changeTitle">更改</button>
  </div>
</template>

<script>
export default {
 data(){
   return{

   }
 },
 methods:{
   changeTitle(){
     this.$emit('xxx')
   }
 }
}
</script>

<style>

</style>

2.父组件调用子组件的方法 $refs

在父组件中的子组件标签上写上 ref=“xxx” 在父组件的方法中通过 this.$refs.xxx.子组件的方法名 来调用子组件中的方法
父组件Parent3.vue代码（示例）：

<template>
  <div class="Parent3">
      <Son ref='ref2' />
      <button @click="show">获取DOM</button>
  </div>
</template>

<script>
import Son from './Son3'
export default {
    components:{
      Son
  },
  methods:{
      show(){
          console.log(this.$refs.myref);
          console.log(this.$refs.ref2);
          this.$refs.ref2.changepp()
      }
  }
}
</script>

子组件Son3.vue代码（示例）：

<template>
  <div class="Son3">
   <p>我是Son3</p>
  </div>
</template>

<script>
export default {
   methods:{
     changepp(){
       console.log("父组件调用子组件的方法");
     }
   }
}
</script>

<style>

</style>

3.兄弟组件调用方法 事件总线 eventbus

1，创建事件总线并将其导出，新创建一个eventBus.js文件

import Vue from "vue"
export default new Vue();

2，发生事件通过 eventBus.$emit

子组件Son1.vue代码（示例）：

<template>
  <div>
      <button @click="eventSonbtn">按钮</button>
  </div>
</template>

<script>
import eventBus from "./eventBus.js"
export default {
  methods:{
      eventSonbtn(){
        //   通过eventBus.$emit 来触发eventBus.$on  第一个参数是监听的名字 第二个是传过去的参数
          eventBus.$emit("evbtn",{name:"wsy",age:23})
          //在页面销毁时，移除EventBus事件监听
          //EventBus.$off("evbtn",{})
      }
  }
}
</script>

<style>

</style>

3，接收事件通过 eventBus.$on

父组件Props.vue代码（示例）：

<template>
  <div>
     <ESon1 />
  </div>
</template>

<script>
import ESon1 from './Son1'
import eventBus from "./eventBus"
export default {
    components:{
        ESon1
    },
    mounted(){
         this.getEventBus()
    },
    methods:{
        getEventBus(){
            //监听接受信息
            eventBus.$off("evbtn")
              eventBus.$on("evbtn",function(val){
                  console.log(val);
              })
        }
    }

}
</script>

<style>

</style>

4，移除事件监听 eventBus.$ off，在每一次eventBus.$ on之前写上eventBus.$ off

 getEventBus(){
            //监听接受信息
            eventBus.$off("evbtn")
              eventBus.$on("evbtn",function(val){
                  console.log(val);
              })
        }

4、子组件获取父组件数据 父组件实例 $parent

在子组件中this.$parent.父组件中定义的方法
代码如下

this.$parent.xxxxxdata

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。