vue自定义view，传值和事件回调

张雨zy

于 2024-02-18 09:42:40 发布

阅读量443

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yu540135101/article/details/136145017

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

传值

向子组件中传值，在子组件props中定义要传递的值

props: {
    text: ""
  },

在父组件中调用

<TitleBarView text="你好"

事件回调

emit后，第一个参数为定义的事件名，第二个参数为向外传出的参数
自定义一个事件

@click="$emit('clickEvent','Hello from child component!')"

也可以展开写


@click="handleClick();"

methods:{
    handleClick() {
      this.$emit('clickEvent', 'Hello from child component!2')
    }
  }

调用自定义点击事件，打印传出的参数

<TitleBarView text="你好" @clickEvent="titleClick"/>

  methods: {
    titleClick(param){
      //此处打印出，子组件中传出的参数
      console.log(param)
    },
  }

完整代码

调用方式

<script>

import TitleBarView from "@/components/views/testing/chirld/TitleBarView.vue";

export default {

  components: {TitleBarView},

  methods: {
    titleClick(param){
      console.log(param)
    },
  }

}

</script>

<template>

  <TitleBarView text="你好" @clickEvent="titleClick"/>

</template>

<style scoped lang="scss">

</style>

自定义控件TitleBarView

<template>
  <div>
    <div class="main-1">
      <el-image class="image" @click="$emit('clickEvent')" :src="pub.getAssetsFile('icon_16_jiantou_zuo.webp')"></el-image>
      <el-text class="title-1">{{ text }}</el-text>
    </div>
  </div>
</template>

<script>
import usePub from "@/utils/pub-use"

export default {
  name: "TitleView",
  props: {
    text: ""
  },
  data() {
    return {
      pub: usePub,
    }
  }
}
</script>

<style scoped>

.main-1 {
  display: flex;
  flex-direction: row;
  /*margin-top: 16px;*/
  width: 100%;
  height: 56px;
  background: #FFFFFF;
  box-shadow: 0 3px 6px 0 rgba(6, 40, 120, 0.12);
  border-radius: 4px;

  .image {
    width: 20px;
    height: 20px;
    margin: auto 16px auto 16px;
  }

  .title-1 {
    /*background: red;*/
    width: auto;
    font-size: 20px;
    font-weight: 500;
    color: #062878;
    line-height: 28px;
  }
}


</style>