vue 组件传值父子组件之间传值子父组件之间的传值以及兄弟之间组件传值

父子组件间的传值

一、子组件访问父组件的数据

方式一 ：子组件直接访问父组件的数据

父组件在调用子组件时，绑定想要获取的父组件中的数据，在子组件内部，使用 props 选项声明获取的数据，即接收来自父组件中的数据。
在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息

父组件

<template>
   <div>
       <div>父组件</div> 
       <div class="hello">
            <h3>我是 App 父组件</h3>
            <h4>访问自己的数据：{{msg}},{{name}},{{user.id}}</h4>
            <hr>
            <!-- 1. 在调用子组件时，绑定想要获取的父组件中的数据 -->
            <showdata :message="msg" :name="name" :user="user"></showdata>
       </div>
   </div>
  

</template>
<script>
// 引入 zitu 组件
import showdata from './zizu'
export default {
    data(){
        return {
        msg:'父组件',
        name:'传值',
        age:'18',
        user:{
            id:1234,
            userName:'zizujian'
        }
        }
    },
    // 注册 Hello 组件
    components:{
        showdata
    } 
}
</script>
<style scoped>

</style>

子组件

<template>
    <div>
        <div>子组件</div>
        <div class="hello">
            <h3>我是 hello 子组件</h3>
            <!-- 在页面中直接渲染即可 -->
            <h4>访问父组件中的数据： {{message}},{{name}},{{user.id}}</h4>
        </div>
    </div>
</template>
<script>
export default {
    // 接收方式一
    // props:['message','name','user'],

    // 接收方式二
    props:{
        // 基础类型检测 (`null` 指允许任何类型)
        // 必传且是字符串
        message:{
            type:String,
            default:''
        },
        // 可能是多种类型
        name:{
            type:[String,Number],
            default:''
        },
           // 数组/对象的默认值应当由一个工厂函数返回
        user:{
            type:Object,
            default:function(){
                return {
                    userName: 'showname'
                }
            }
        },
    },
    watch:{
        name(){
            this.ziclick()
        }
    },
    data(){
        return{
            messagedata:'我是子组件的消息'
        }
    },
    mounted(){
        console.log(this.name)
        console.log(this.$parent.age)
    },
    methods:{
       
    }
}
</script>
<style scoped>

</style>
注意：Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。

子传父

在子组件中使用 $emit(事件名,数据) 触发一个自定义事件发送数据
在父组件在使用子组件的标签内监听子组件的触发事件，并在父组件中定义方法用来获取数据

子组件

<template>
    <div>
        <div>子组件</div>
        <div class="zi">
            <h3>我是子组件</h3>
            <!-- 在页面中直接渲染即可 -->
            <h4>访问自己组件中的数据： <br>
                {{message}}<br>
                {{name}}</h4>
            <el-button @click="click">向父组件传值</el-button>
        </div>
    </div>
</template>
<script>
export default {
  data(){
      return{
          message:'子组件信息',
          name:'子传'
      }
  },
  methods:{
      // 在此处定义事件，用来发送数据，也可直接写到 mounted 内自动发送
      click(){
          console.log(123)
           // 此处的 this 表示当前子组件的实例,transfer 是在父组件连接事件的名称，后面跟上返回的数据；然后在父组件通过getData获取数据,就这样子传父的过程就完成了…
            this.$emit('transfer',this.message,this.name)
      }
  }
}
</script>
<style scoped>

</style>

父组件

<template>
   <div>
       <div>父组件</div> 
       <div class="hello">
            <h3>我是接收子组件传值父组件</h3>
            <hr>
            <h3>显示子组件的值: </h3>
            {{msg}} <br>
            {{name}}
            <!-- 1. 在调用子组件时，绑定想要获取的父组件中的数据 -->
            <!-- 注意:此处的 @transfer 必须是和子组件中定义的 this.$emit('transfer',this.message,this.name)中transfer 是一致的 -->
            <showdata @transfer="getData"></showdata>
       </div>
   </div>
  

</template>
<script>
// 引入 zitu 组件
import showdata from './zichuan'
export default {
    data(){
        return {
            msg:'',
            name:''
        }
    },
    methods:{
        getData(msg,name){
            // console.log(msg)
            this.msg = msg
            this.name = name
            console.log(this.msg)
        }
    },
    // 注册 Hello 组件
    components:{
        showdata
    } 
}
</script>
<style scoped>

</style>

兄弟之间传值

兄弟组件之间的传值和父子组件之间的传值非常相似，都是通过$emit;原理是：vue一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线；传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。
接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

首先我们需要建立一个中转站bus.js

import Vue from 'vue'

export default new Vue

传值组件

<template>
   <div>
       <div>兄弟组件2</div> 
       <div class="hello">
            <h3>显示兄弟组件2组件的值: </h3>
            {{msg}} <br>

            <el-button @click="senddata">传值给兄弟1</el-button>
       </div>
   </div>
  

</template>
<script>
// 引入 公共bus
import bus from './bus'
export default {
    data(){
        return {
            msg:'我是兄弟组件2的值',
        }
    },
    // mounted(){
    //     bus.$emit("send",this.msg)
    // },
    methods:{
        senddata(){
            // 在需要传值的组件中，通过emit触发一个自定义事件，并传递参数 ,其中 send 是方法的名称，必须和$on接收的名称一样 this.msg是需要传递的值
            bus.$emit("send",this.msg)
        }
    },
}
</script>
<style scoped>

</style>

接收组件

<template>
   <div>
       <div class="hello">
            <h3>我是接收兄弟组件2传值父组件</h3>
            <hr>
            <h3>显示兄弟组件2组件的值: </h3>
            {{msgda}} <br>
            <el-button @click="shoedaya">显示兄弟2的值</el-button>
       </div>
   </div>
  

</template>
<script>
// 引入 公共bus
import bus from './bus'
export default {
    data(){
        return {
            msgda:'我是兄弟1的值',
        }
    },
    mounted(){
      
    },
    created(){
        //在需要接收值的地方使用$on,    其中send 是$emit中命名的名称 必须保持一致，
        //  后面是传参函数可以写成箭头函数 也可以是 function（e）形式传参
          bus.$on("send",e=>{
            this.msgda= e
            console.log(this.msgda)
        })
    },
    methods:{
        shoedaya(){
          console.log(12345)
          console.log(this.msgda)
        }
    },
}
</script>
<style scoped>

</style>