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

在Vue.js中，可以通过几种不同的方式将“目标”属性（通常指的是HTML中的target属性，如_blank、_self等）传递给组件。以下是一些常见的方法：

方法一：使用props传递

在Vue组件中，你可以定义一个prop来接收target属性的值。

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

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

然后在父组件中使用时传递target属性：

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

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

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

方法二：使用事件和本地数据

如果你想在组件内部处理target属性，可以通过事件来触发，并在组件内部设置本地数据。

<!-- 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>

在父组件中触发事件来设置target：

<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>