vue 组件传值 父子 兄弟 后代组件

vue传值方式

父子组件传值 vue2.0

APP.vue

<template>
  <h1>app根组件-尝试组件之间传值</h1>
  <h2>father的值 ：{{father}}</h2>
  <hr>
  <child :father="father" @updateFatherval="updateVal"></child>
  
</template>

<script>
import child from "./components/child/child.vue"
export default {
  name:'app',
  components:{child},
  data(){
    return {
      father:'123',
      child:''
    }
  },
  methods:{
    updateVal(val){
      this.father = val
    }
  }
}
</script>

<style>

</style>

<template>
  <h1>这是child组件</h1>
  <h2>father的值{{father}}</h2>
  <button @click="updateFa">向father组件传值</button>
</template>

<script>
export default {
    name:'child',
    //emits:['update:father'],
    props:{
        father:{
            type:String
        }
    },
    methods:{
        updateFa(){
            //this.$emit('update:father','child组件传递的')
            this.$emit("updateFatherval","child组件传递的")
        }
    }
}
</script>

<style>

</style>

在vue2.0中，父组件向子组件传值方式是在子组件以属性绑定的方法，绑定到子组件上

<child :father="father"></child>

子组件上在pros 属性中接收：

props:{
        father:{
            type:String
        }
},

如果子组件需要向父组件传值，使用的是自定义事件

<child :father="father" @updateFatherval="updateVal"></child>

父组件中监听 updateFatherval函数，并执行updataVal方法，修改父组件father的值，

子组件中使用this.$emit触发updateFatherval,并将需要传递的值作为第二个参数，传递给父组件的updateVal方法

this.$emit("updateFatherval","child组件传递的")

vue3.0中子组件更改父组件中的值比较简单一些

父组件中 使用 v-model对值进行双向绑定

<child v-model:father="father"></child>

子组件中 直接调用 update:father

 this.$emit('update:father','child组件传递的')

兄弟组件传值 Eventbus

首先安装mitt

npm install mitt -S

创建eventBus.js文件

import mitt from "mitt";

const bus = mitt()
export default bus

app.vue

<template>
  <h1>app根组件-尝试组件之间传值</h1>

  <hr>

  <brother1></brother1>
  <brother2></brother2>
  
</template>

<script>

import brother1 from "./components/brother/brother1.vue"
import brother2 from "./components/brother/brother2.vue"
export default {
  name:'app',
  components:{brother1,brother2},
  data(){
    return {


    }
  },
  methods:{
    
  }
}
</script>

<style>

</style>

brother1.vue

brother1组件中导入 eventBus,在点击按钮试触发发送方法，发送数据

<template>
  <h1>brother1组件</h1>
  <span>brother1:{{brother1}}</span>
  <button @click="sendBrother">向brother2组件传值</button>
</template>

<script>
import bus from './eventBus'
export default {
    name:'brother1',
    data(){
      return {
        brother1:'brother1'
      }
    },
    methods:{
      sendBrother(){
        bus.emit('sendBrother2','brother1传递值')
      }
    }
}
</script>

<style>

</style>

brother2.vue

brother2中创建组件时，监听发送的方法，并接收数据

<template>
  <h1>brother2组件</h1>
  <span>brother2:{{brother2}}</span>
</template>

<script>
import bus from './eventBus'
export default {
    name:'brother2',
    data(){
      return {
        brother2:'brother2'
      }
    },
    methods:{

    },
    created(){
      bus.on('sendBrother2',(val)=>{
        this.brother2 = val
      })
    }
}
</script>

<style>

</style>

后代组件

后代组件传值使用provide 和 inject

App.vue

<template>
  <h1>app根组件-尝试组件之间传值</h1>
  <h2>father的值 ：{{father}}</h2>
  <hr>
   <child v-model:father="father"></child>
  <!-- <child :father="father" @updateFatherval="updateVal"></child> -->
  <!-- <brother1></brother1>
  <brother2></brother2> -->
  
</template>

<script>
import child from "./components/child/child.vue"
import brother1 from "./components/brother/brother1.vue"
import brother2 from "./components/brother/brother2.vue"
export default {
  name:'app',
  components:{child,brother1,brother2},
    provide() {
    return {
      grandFather: '来自父组件的父组件的数据'
    }
  },
  data(){
    return {
      father:'123',
      child:''
    }
  },
  methods:{
    updateVal(val){
      this.father = val
    }
  }
}
</script>

<style>

</style>

child.vue

<template>
  <h1>这是child组件</h1>
  <h2>father的值{{father}}</h2>
  <button @click="updateFa">向father组件传值</button>
  <hr>
  <grandsonVue></grandsonVue>


</template>

<script>
import grandsonVue from "./grandson.vue"
export default {
    name:'child',
    components:{grandsonVue},
    emits:['update:father'],
    props:{
        father:{
            type:String
        }
    },
    methods:{
        updateFa(){
            this.$emit('update:father','child组件传递的')
            //this.$emit("updateFatherval","child组件传递的")
        }
    }
}
</script>

<style>

</style>

grandSon.vue

<template>
  <h1>孙子组件</h1>
  <hr>
  <span>{{grandFather}}</span>
</template>

<script>
export default {
    name:'grandson',
    inject:['grandFather']
}
</script>

<style>

</style>