如何将“目标”属性传递给Vue.js组件

<!-- MyComponent.vue -->
<template>
  <a :href="url" :target="target">{{ linkText }}</a>
</template>

<script>
export default {
  props: {
    url: String,
    target: String, // 定义target属性
    linkText: String
  }
}
</script>

<template>
  <MyComponent url="https://example.com" target="_blank" linkText="Visit Example.com" />
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

<!-- MyComponent.vue -->
<template>
  <a :href="url" :target="computedTarget">{{ linkText }}</a>
</template>

<script>
export default {
  data() {
    return {
      localTarget: '_self' // 默认值
    };
  },
  props: {
    url: String,
    linkText: String
  },
  computed: {
    computedTarget() {
      return this.localTarget;
    }
  },
  methods: {
    setTarget(target) {
      this.localTarget = target;
    }
  }
}
</script>

<template>
  <MyComponent url="https://example.com" linkText="Visit Example.com" @set-target="_handleSetTarget" />
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  methods: {
    _handleSetTarget(target) {
      this.$refs.myComponent.setTarget(target);
    }
  }
}
</script>