vue常见用法（三）

1、自定义事件

自定义事件需要使用到$emit(eventName,params)函数，编写一个组件MyComp.vue，定义sendParamHandler函数发送参数

<!-- 使用$emit自定义事件传递参数 -->
<template>
  <div>
    <p>{{ title }}</p>
    <button @click="sendParamHandler">send</button>
  </div>
</template>
<script>
  export default {
    name:"MyComp",
    data(){
      return{
        msg:"测试子传父"
      }
    },
    props:{
      title:{
        type:String,
        default:"参数测试"
      }
    },
    methods:{
      sendParamHandler () {
        this.$emit("myEvent",this.msg)
      }
    }
  }
</script>

在App.vue中，定义eventHandler函数，并绑定到myEvent事件上，接受data参数

<template>
  <div id="app">
    <p>{{ msg }}</p>
    <MyComp title="参数测试" @myEvent="eventHandler"/>
  </div>
</template>

<script>
import MyComp from './components/MyComp'

export default {
  name: 'App',
  data(){
    return{
      msg:""
    }
  },
  components: {
    MyComp
  },
  methods:{
    eventHandler(data){
      this.msg = data;
    }
  }
}
</script>

2、插槽

插槽使用<slot>元素渲染数据，在组件MyComp.vue中

<!-- 插槽 -->
<template>
  <div>
      <!-- 1、插槽内容   -->
      <slot>默认数据</slot>

      <!--  2、具名插槽    -->
      <slot name="n"></slot>

     <!--   3、作用域插槽    -->
      <slot :message="message"></slot>
  </div>
</template>
<script>
  export default {
    name:"MyComp",
    data(){
      return{
        message:"作用域插槽的数据"
      }
    }
  }
</script>

在App.vue中

<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div id="app">
    <MyComp>
        <!-- 1、插槽内容    -->
        <div>插槽测试</div>
        {{ msg }}

        <hr />
        <!--  2、具名插槽    -->
        <template v-slot:n>
          具名插槽
        </template>

        <hr />
        <!--  3、作用域插槽    -->
        <template v-slot:default="slotProps">
            <div>作用域插槽:{{slotProps.message}}</div>
        </template>
    </MyComp>
  </div>
</template>

<script>
import MyComp from './components/MyComp'

export default {
  name: 'App',
  data(){
    return{
      msg:"编译作用域"
    }
  },
  components: {
    MyComp
  }
}
</script>