组件传参 组件传参 组件传参

父传子 通过ref 

 父组件

 <mysons  ref="msg"></mysons>

data() {
    return {
      msg:'ref父传子'
    };
mounted() { 
   this.$refs.msg.MySon=this.msg
  },

子组件
<template>
  <div>
    <h1>{{ MySon }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      MySon: "",
    };
  },

子 传父 通过ref

父组件
<template>
  <div>
    <my-son ref="gog" ></my-son>
    <h1>ref子传父{{ res }}</h1>
  </div>
</template>
<script>
 data() {
    return {
      res: "",
     
    };
  },
methods：{
getref（e）{
console.log(e)
}
}，

 mounted() {
    this.$refs.gog.$on("ai", this.getref（）);

//少写一个方法 直接传（）={}箭头函数给子组件 让子组件触发
    this.$refs.gog.$on("ai",(e)=>{
            console.log(e)  this.res=e
    })
     
    
 }



<script>
------------------------------------------------------------------
子组件
<template>
  <div>
    <button @click="getref">孩子1 ref</button>
  </div>
</template>

<script>
 methods: {
     data() {
    return {
     
      res: "ref",
    };
  },
    //ref子传父
    getref() {
      this.$emit("ai", this.res);
    },
  },
};
<script/>

子父传 通过$emit

 Vuecomponent构造函数

全局事件总线

 

 消息订阅与发布

嵌套深的 用provide  inject

 provide提供数据

 inject接收数据

$bus.js

src文件下 创建一个bus.js
import Vue from 'vue'
export default new Vue()

MyLeft.vue 组件

<template>
  <div>
left
  </div>
</template>

<script>
import bus from '../bus.js'
  export default {

  created() { 
      bus.$on('share', (v) => {
        console.log(v) //接收数据
       })
  }
  }
</script>

<style lang="scss" scoped>

</style>

MyRight.vue组件
<template>
  <div>
right   <button @click="send">发送数据</button>
  </div>
</template>

<script>
import bus from '../bus.js'
  export default {
 
  methods: {
    send() {     
    bus.$emit('share',555) //提供数据
    }
  },
  }
</script>

<style lang="scss" scoped>

</style>

min.js

import Vue from 'vue'
import App from './App.vue'
// 导入组件
import GoodsList from './components/GoodsList'
// 注册组件
Vue.component('GoodsList', GoodsList)
//全局注册组件
import MyLeft from '@/components/MyLeft.vue'

Vue.component('MyLeft', MyLeft)

// 去掉温馨提示
Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

 通过props传一个方法 实现子父传参  子父传参 实质就是  子里触发父组件里的方法

//父组件
 <user-avatar :a="f1"></user-avatar>

<script>

 f1(e){
    console.log(e)
  }
<script>


//子组件

<button @click="get">点我传参</button>
<script>
export default {
  props:{
        a:{
            type:Function
        },
  methods: {
   get() {
          this.a(5555)
   }
}    
<script>

通过 arguments 或者 $event 来接收子传来的数据

//父组件
<template>
  <div>
       {{str}}  // {a:1,b:2}
    <user-avatar @type="str=arguments[0]"></user-avatar>

//   当使用的是自定义事件的时候 $event就是子传来的数据
    <user-avatar @type="str=$event"></user-avatar>
  </div>
</template>
<script>
export default {
 data(){
return {
   str:'',
  }
 }
}    

</script>



//子组件
<button @click="get">点我传参</button>
<script>

 get() {       
         this.$emit('type',{a:1,b:2})
        }
      },
</script>