将元素ID从组件传递到组件(角度)

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    const elementId = 'exampleId';

    return (
      <div>
        <ChildComponent elementId={elementId} />
      </div>
    );
  }
}

// 子组件
import React from 'react';

class ChildComponent extends React.Component {
  render() {
    const { elementId } = this.props;

    return (
      <div>
        <p>元素ID: {elementId}</p>
      </div>
    );
  }
}

<!-- 父组件 -->
<template>
  <div>
    <child-component :element-id="elementId"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      elementId: 'exampleId'
    };
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>元素ID: {{ elementId }}</p>
  </div>
</template>

<script>
export default {
  props: ['elementId']
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @element-id="handleElementId"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleElementId(elementId) {
      console.log('元素ID:', elementId);
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="emitElementId">传递元素ID</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitElementId() {
      const elementId = 'exampleId';
      this.$emit('element-id', elementId);
    }
  }
}
</script>