Vue 组件在包装到另一个组件时停止工作答案

【问题标题】：Vue component stops working when wrapped into another componentVue 组件在包装到另一个组件时停止工作
【发布时间】：2020-07-04 06:23:27
【问题描述】：

我被 Vue.js 困住了。我试图基本上将一个组件（已经在一个组件内）包装成另一个组件。我有一个带有选择的下拉菜单，我在更改时调用了一个函数。一切正常，直到我将组件再包装在顶部。顶层是刀片，因为它与 Laravel 一起使用。片段：

带有下拉菜单的组件：

<template>
    <div id="watchlist-item">
        <select @change="changed()" class="form-control"
                id="currencies" name="currencyList">
            <option value="USD" selected="selected">USD</option>
            <option value="EUR">EUR</option>
        </select>
    </div>
</template>
<script>
    export default {
        name: "watchlist-item.vue",
        methods: {
            changed() {
                alert("CHANGED");
            },
        },
    }
</script>

包装器：

<template>
    <div id="watchlistItem">
        <watchlist-item></watchlist-item>
    </div>
</template>
<script>
    export default {
        name: "watchlist"
    }
</script>

顶部组件：

<template>
    <div id="watchlist">
        <watchlist></watchlist>
    </div>
</template>

<script>
    export default {
        name: "main-component"
    }
</script>

刀片模板：

@extends('layouts.layout')
<div>
{{--    <div id="maincomponent">--}}
{{--        <main-component></main-component>--}}
{{--    </div>--}}

    <div id="watchlistItem">
        <watchlist-item></watchlist-item>
    </div>
</div>

这很好用，我对变化保持警惕。但是，当我取消注释注释部分时，反之亦然（所以基本上再包装一次）vue 停止提醒我。我觉得这种行为很奇怪，但我只是从 Vue 开始，所以也许它只是我缺少的一个小细节。我什至不知道要搜索什么，所以任何帮助将不胜感激。谢谢。

【问题讨论】：

您确定在其父组件中正确导入子组件吗？就像，所有组件都导入了它的子组件，例如。主组件 > 关注列表 > 关注列表项？
我将它们全部导入到一个 js 文件中。那是我应该调查的吗？这会导致问题吗？谢谢。
如果您在全球范围内正确导入组件，那么应该没有问题，但只是为了实验目的，在父组件中导入子组件，如果您非常确定您在多个地方使用组件，请尝试全局导入组件。
我尝试仅在全球范围内安装主组件，其余部分在其父组件中本地安装，但没有改变。但我与其他组件的使用方式有所不同。我有从ajax调用获取数据的组件，当它在blade.php中它可以工作，但是当我将它包装在一个组件中以便它的主组件>组件（获取数据）时，它停止反应并且它只呈现默认值数据。那么也许它与laravel有关？
我对 Laravel 的了解真的太少了，抱歉！我不确定出了什么问题。

标签： javascript vue.js vue-component

【解决方案1】：

只需确保您在其父组件中正确导入子组件：

main-component > watchlist > watchlist-item
               |           |
              has         has

【讨论】：

谢谢，这毕竟是问题所在。

【解决方案2】：

它不起作用，因为你需要通过components 注册它，但首先你需要导入它。

<template>
    <div id="watchlistItem">
        <watchlist></watchlist>
    </div>
</template>
<script>
    import watchlist from "path/to/watchlist";
    export default {
        name: "watchlist",
        components: {
           watchlist: watchlist
        }
    }

【讨论】：