vue组件传值总结

一、父传子

给子组件设置自定义属性，子组件通过props接收
父组件：

<template>
  <div>
    <p>我是父组件1</p>
    <child1 :tit='msg'></child1>
  </div>
</template>

<script>
import child1 from '../components/child1.vue'
export default {
  data(){
    return {
      msg:'我是父组件的数据'
    }
  },
  components:{
    child1
  }
}
</script>

子组件：

<template>
  <div>
    <p>我是子组件</p>
    <p>接受父组件传过来的值---{{ tit }}</p>
    <p>{{ msg1 }}</p>
    <button @click="changeMsg">点击修改msg</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: "我是子组件数据",
    };
  },
  props: ["tit"],
  methods: {
    changeMsg() {
      this.msg1 = this.tit;
    },
  },
};
</script>

二、子传父

1、子组件触发自定义事件，父组件绑定子组件定义的自定义事件名，监听子组件的事件，实现通信
子组件：

<template>
  <div @click="transform">我是子组件</div>
</template>

<script>
export default {
    data(){
        return {
            msg:'我是子组件的数据'
        }
    },
    methods:{
        transform(){
            this.$emit('transMsg',this.msg)
        }
    }
}
</script>

父组件：

<template>
  <div>
      <p>我是父组件</p>
      <child2 @transMsg='changeMsg'></child2>
      <p>{{msg}}</p>
  </div>
</template>

<script>
import child2 from '../components/child2.vue' 
export default {
    data(){
        return {
            msg:'没数据'
        }
    },
    components:{
        child2
    },
    methods:{
        changeMsg(val){
            this.msg=val
        }
    }
}
</script>

2、ref方式：ref属性绑定到组件标签上，可以获取到子组件上的所有属性和方法

三、嵌套传值(爷孙传值)

使用provide和inject，只要在上一层声明的provide，那么下一层无论多深都能通过inject访问到provide的数据
爷爷组件：

<template>
  <Son></Son>
</template>

<script>
import Son from "./Son.vue";
export default {
  components: {
    Son,
  },
  data() {
    return {
      msg: 666,
    };
  },
  provide() {
    return {
      fatherMsg: this.msg,
      fatherMether: this.say,
    };
  },
  methods: {
    say() {
      alert("你好！");
    },
  },
};
</script>

子组件：

<template>
  <GrandSon></GrandSon>
</template>

<script>
import GrandSon from './GrandSon.vue'

export default {
  components: {
    GrandSon,
  }
}
</script>

孙子组件：

<template>
  <div>
    <p>{{ fatherMsg }}</p>
    <button @click="fatherMether()">你好</button>
  </div>
</template>

<script>
export default {
  inject: ["fatherMsg", "fatherMether"],
};
</script>

四、兄弟组件传值

通过中央事件总线

// assets文件夹下eventBus.js文件
import Vue from 'vue'
export default new Vue()

兄弟组件1：

<template>
  <div>
      <p>我是兄弟1</p>
      <button @click="transCom">传给兄弟</button>
  </div>
</template>

<script>
import eventBus from '../assets/eventBus'
export default {
    data(){
        return {
            data:'给兄弟2的数据'
        }
    },
    methods:{
        transCom(){
            eventBus.$emit('trans',this.data)
        }
    }
}
</script>

兄弟组件2：

<template>
  <div>
      <p>我是兄弟2</p>
      <p>{{data}}</p>
  </div>
</template>

<script>
import eventBus from '../assets/eventBus'
export default {
    data(){
        return {
            data:''
        }
    },
    mounted(){
        eventBus.$on('trans',(val)=>{
            this.data=val
        })
    }
}
</script>