0

我有两个使用 component 元素展示的动态组件。

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

其中一个组件需要道具资源，而另一个则发出自定义事件resourceAdded。一切正常，除了我收到错误消息“Extraneous non-emits event...”和“Extraneous non-emits props...”，我理解这是因为它也在尝试传递道具并从组件发出自定义事件没有指定道具或发射。我怎样才能解决这个问题而不必在两个组件中指定发射和道具？或者这只是这样做的方法吗？

FIRST COMPONENT - 只发射

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

1 回答 1

0

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

于 2021-02-19T07:06:07.717 回答