vue组件传值props设置默认参数

vue组件传值props设置默认参数

子组件

<template>
  <div class="container">
    <div class="top">
      <p class="p_left">{{titleLeft}}</p>
      <p class="p_right" @click="clickAction">{{titleRight}}</p>
    </div>
    <div class="line"></div>
  </div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  props: {
    titleLeft: {
      type: String,
      default: "这是默认的titleLef"
    },
    titleRight: {
      type: String,
      default: "这是默认的titleRight"
    }
  },
  data() {
    return {};
  },
  methods: {
    clickAction() {
      this.$emit("clickHeadAction", this.titleRight);
    }
  }
};
</script>

父组件

<template>
  <div class="hello">
    <ActivityHead @clickHeadAction="clickChild"></ActivityHead>
  </div>
</template>

<script>
import ActivityHead from "./svgIcon";
export default {
  components: {
    ActivityHead
  },
  data() {
    return {
      msgLeft: "xxxxxxxx",
      msgRight: "dddd"
    };
  },
  computed: {},
  methods: {
    clickChild(e) {
      console.log(e);
    }
  }
};
</script>

效果: