vue（四）组件交互

Props

Prop可以实现各组件间的数据传递（父组件传递数据给子组件），支持传递的数据类型可以是：基础数据类型、对象、函数。返回的数据类型是数组或对象时，默认值需要是函数。

使用方式如下：

1、在需传递的组件中（父组件），export需要传递的数据

2、在需传递的组件中（父组件），import 接收数据的组件（子组件）

3、在接收数据的组件中（子组件），设置props属性接收传递的数据，在其中定义接收数据的变量名、类型和默认值

#   App.vue 父组件
<script>
import mytemp from './components/mytemp.vue'  // 2、导入接收数据的组件

export default {
  name: 'App',
  data(){
    return{
      msg:"this is my temp" // 1、export 需要传递的变量
    }
  },
  components: {
    mytemp
  }
}
</script>

#   mytemp.vue 子组件
<template>
    <h3>{{msg}}</h3> // 使用传递的数据
</template>

<script>
    export default{
        name:"mytemp",
        // 3、设置props属性，接收传递的数据
        props:{
            msg:{        //key为需要传递的变量值，type指定数据类型，default指定默认值
                type:String,
                default:""
            },
            ids:{    // 传递的数据是数组或对象，默认值是函数
                    type:Array,
                    default:function{
                        return [];
                    }
            }
        }

    }
</script>

$emit

props可将父组件数据传递给子组件，自定义事件$emit可以反向传递，将子组件数据传递给父组件

使用方法如下：

1、在子组件（需要传递数据组件）中，定义传递数的方法，通过 $emit 自定义事件，$emit() 第一个参数为自定义事件的名称，第二个为需要传递的数据

2、在子组件（需要传递数据组件）中，定义触发数据传递

3、在父组件（接收数据组件）中，import子组件，定义接收数据的方法

4、在父组件，使用自定义的事件，接收子组件的数据 @自定义事件名称=接收数据的方法

#  mycompo.vue 子组件
<template>
    <h3>自定义事件传递数据</h3>
    <button @click="sendMsgHandle">点击传递数据去父组件</button>  // 2、定义触发数据传递
</template>

<script>
    export default {
        name:"Mycompo",
        data(){
            return{
                msg:"传递的数据"
            }
        },
        methods:{    //  1、通过 $emit 方法自定义事件，第一个参数为自定义事件的名称，第二个为需要传递的数据
            sendMsgHandle(){
                this.$emit("msgToSend",this.msg)
            }
        }
    }
</script>

#  app.vue 父组件
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <Mycompo @msgToSend="getMsgHandle"/>    // 4、使用自定义的事件，接收子组件的数据，@自定义事件名称=接收数据的方法
  <h3>{{ msg2 }}</h3>
</template>

<script>
import Mycompo from './components/mycompo.vue'; // 3、导入子组件

export default {
  name: 'App',
  components: {
    Mycompo
},
  data(){
    return{
      msg2:""
    }
  },
  methods:{
    // 3、定义接收数据的方法，参数data既是传递的数据
    getMsgHandle(data){
      this.msg2=data
    }
  }
}
</script>