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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值