Question

我正在学习Vue.js，而我正在努力寻找一种方法来组织我的代码。我试图让所有东西尽可能模块化，所以在制作滑块时我会做以下事情：

<template>
    <div class="banners">
        <slot></slot>
    </div>
</template>
<script>
    export default {
        methods: {
            echo() {
                console.log('Echoing..')
            }
        },
        mounted() {
            $('.banners').slick();
        }
    }
</script>

在我看来，我只是使用组件：

<banners>
    <?php for ($i = 0; $i < 5; $i++) : ?>
        <img src="http://lorempixel.com/1440/500" alt="Banner image" class="banner">
        <a href="#" v-on:click="echo">Echo</a>
    <?php endfor; ?>
</banners>

但是在我尝试调用 echo 之后，它会在父作用域中查找它，而不是在横幅组件作用域中查找它，并且表示该方法未定义。< / p>

我想知道实现这一目标的最佳方法。对我来说，在父作用域内声明方法是没用的，因为我将在整个项目中有数百万个其他类似于这种情况的方法，如果我这样做，它将很快变得无组织。我希望将这些横幅方法放在他们自己的无论什么中，以便我可以轻松找到它们的所有位置，以及除横幅之外的其他模块。

也许我以错误的方式使用组件而不应该使用它？我只是不能在父作用域内放置一个 echo（）方法，只能与该特定组件相关。想象一下，也许我会在其他元素中使用其他 echo（）来做与旗帜不同的事情。

我也无法移动模板中的 slot 内容，因为我需要通过PHP获取数据，这就是我为做的原因>在槽内。

感谢您的帮助！

Answer 1

在这种特殊情况下，您应该使用scoped slot。

在您的组件中传递您希望能够在插槽中使用的属性（在本例中为var fileBatches = "Calling a function which returns array of values that needs to be processed" var _done = 0; var _count = fileBatches.length; var _finalResponseArray = []; fileBatches.forEach(function(item, i) { var finalBatch = [] var xhr = new XMLHttpRequest(); finalBatch.push("Things that need to be processed by controller"); finalData = finalBatch.join('&').replace(/%20/g, '+'); // Sending the values in a format so that it will be received by controller xhr.open('POST', theURL); xhr.onload = function (event) { if (xhr.status == 200) { _finalResponseArray[i] = (xhr.responseText); } }; xhr.onloadend = function (event) { // this gets called in ALL cases, i.e. after load, error or abort if(++_done == _count) { // _finalResponseArray is complete here } }; xhr.setRequestHeader('accept', 'text/JSON'); xhr.send(finalData); }); //_finalResponseArray will ALWAYS be empty here方法）。

echo

在您的应用模板中，使用具有scope属性的模板标记将您注入的内容包装到插槽中。

<div class="banners">
    <slot :echo="echo"></slot>
</div>

这是example。

如果您不需要使用传递给插槽的所有内容，或者只是为了避免每次都写<banners> <template slot-scope="props"> <?php for ($i = 0; $i < 5; $i++) : ?> <img src="http://lorempixel.com/1440/500" alt="Banner image" class="banner"> <a href="#" v-on:click="props.echo">Echo</a> <?php endfor; ?> </template> </banners>，您也可以对结构化属性进行解构。

props.echo

Answer 2

您还可以通过引用来引用父组件。

<banners ref="TheBanner">
    <?php for ($i = 0; $i < 5; $i++) : ?>
        <img src="http://lorempixel.com/1440/500" alt="Banner image" class="banner">
        <a href="#" v-on:click="$refs.TheBanner.echo()">Echo</a>
    <?php endfor; ?>
</banners>

从组件内的组件调用方法<slot> </slot>

2 个答案: