Question

我试图嵌套这些单个文件组件，并且仅显示该行。我不是正确理解了吗？

activationKeyEditText.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            beforeCharCounter = before;
            charCounter = count;
            System.out.println(count);
        }

        @Override
        public void afterTextChanged(Editable s) {
            if ((s.length() == 5 && beforeCharCounter <= 5 && charCounter == 5) ||
                    (s.length() == 11 && beforeCharCounter <= 11 && charCounter == 11)
                    || (s.length() == 17 && beforeCharCounter <= 17 && charCounter == 17)) {
                s.append('-');
            }
        }
    });

row.vue

<template>
    <div>
        <row>
            <column>
                <numberModule>
            </column>
        </row>
    </div>
</template>
<script>
    import row from '../../containers/row.vue'
    import column from '../../containers/column.vue'
    import numberModule from '../../components/numberModuleTemplate.vue'

    const sales = {
        components: {
            row,
            column,
            numberModule
        },
    };
    export default sales;
</script>

column.vue

<template>
    <row v-bind:class="classes"></row>
</template>

<script>
    const row = {
        data: function() {
            return {
                classes: ["row","row-eq-height-lg"]
            }
        }
    };

    export default row;
</script>

numbersModuleTemplate.vue

<template>
   <column v-bind:class="classes"></column>
</template>

<script>
    const column = {
        data: function() {
            return {
                classes: ["col-lg-3"]
            }
        }
    };

    export default column;
</script>

也许我错过了一些看不见的东西。如果我理解正确，则应该可以嵌套这些组件，但是，我只能看到dom中显示的行。

Answer 1

您的#Calling with a very large integer myFunc(0xFFFFFFFF11111111L)中没有slots，因此不会输出原始内容。试试：

<row>

您的<template> <row v-bind:class="classes"> <slot></slot> </row> </template> <script> const row = { data: function() { return { classes: ["row", "row-eq-height-lg"] } } }; export default row; </script>组件以及希望放置在元素标记中的原始内容放置在其他组件上的其他组件也是如此。

请考虑以下简化示例，该示例说明了以下<column>的必要性：

<slot>

const foo = {
  template: "<div></div>"
}
const bar = {
  template: "<div><slot></slot></div>"
}

const app = new Vue({
  el: "#app",
  components: {
    foo,
    bar
  }
});

Answer 2

您绝对可以嵌套Vue组件。但是，如果要制作一个在开始和结束标记之间（行组件的情况）可以接受某些内容的组件，则需要查看一下 slots 。

Here's your example working on codesandbox。我只需要在行组件中添加一个插槽，以便row知道将根模板中指定的列放在何处。这是行模板...

<template>
    <row v-bind:class="classes">
      <slot></slot>
    </row>
</template>

您是否可以在vue中嵌套单个文件组件标签

2 个答案: