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

传值

• 向子组件中传值，在子组件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>