如何在 Vue.js 中的动态组件上使用特定于组件的属性？

问题描述

我有两个动态组件，我使用 component 元素来展示它们。

  <keep-alive>
    <component :is="activeOption" :resources="resources" @resourceAdded="addToList"></component>
  </keep-alive>

其中一个组件需要道具 resources，而另一个组件发出自定义事件 resourceAdded。一切正常，除了我收到错误消息“无关的非发射事件...”和“无关的非发射道具...”，我理解这是因为它也在尝试传递道具并从组件发出自定义事件没有指定道具或发射。我如何解决这个问题而不必在两个组件中指定发射和道具？或者这只是这样做的方式？

第一个组件 - 只发射

<script>
    export default {
        emits: ['resourceAdded'],// props: {
        //     resources: {
        //         type: Array,//         required: true
        //     }
        // },NO  PROPS ERROR IF THIS IS SPECIFIED
        data() {
            return {
                errorMsg: false
            }
        },methods: {
            addNewResource() {
                const name = this.$refs.name.value
                const description = this.$refs.description.value
                const link = this.$refs.link.value
    
                if(name === '' || description === '' || link === ''){
                    this.errorMsg = true
                }else{
                    this.$emit("resourceAdded",name,description,link)
                }
            }
        }
    }
    </script>

第二个组件 - 只需要道具

<script>
export default {
    props: {
        resources: {
            type: Array,required: true
        }
    },// emits: ['resourceAdded'] NO EMITS ERROR IF THIS IS SPECIFIED
}
</script>

解决方法

Vue.js 中有一个提供/注入功能，允许在 Vue.js 中父子之间进行特定的数据和函数通信。我发现它在这里对我来说很好用，而且它也适用于将一些数据/函数传入或传出深度嵌套的子级，因此您不必通过它的所有祖先。