在Vue应用中获取自定义组件属性值

<template>
  <CustomComponent :custom-prop="value" />
</template>

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

export default {
  components: {
    CustomComponent
  },
  data() {
    return {
      value: 'Hello, World!'
    };
  }
};
</script>

<template>
  <div>{{ customProp }}</div>
</template>

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

<template>
  <button @click="sendToParent">Send to Parent</button>
</template>

<script>
export default {
  methods: {
    sendToParent() {
      this.$emit('custom-event', 'Some data');
    }
  }
};
</script>

<template>
  <CustomComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: {
    CustomComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 'Some data'
    }
  }
};
</script>

import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      customValue: 'Initial value'
    };
  },
  mutations: {
    updateCustomValue(state, newValue) {
      state.customValue = newValue;
    }
  }
});

<template>
  <div>{{ customValue }}</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['customValue'])
  },
  methods: {
    ...mapMutations(['updateCustomValue']),
    changeValue() {
      this.updateCustomValue('New value');
    }
  }
};
</script>

<script>
import { provide } from 'vue';

export default {
  setup() {
    provide('customValue', 'Provided value');
  }
};
</script>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const customValue = inject('customValue');
    return { customValue };
  }
};
</script>