Question

我现在已经输入了Vue。 vuetify中的代码使用嵌套组件。在我的代码中，当我尝试嵌套它时，仅安装了PARENT组件。什么原因？如何渲染CHILD组件？

======================我的代码======================= =

<div id="app">
    <parent>
        <child></child>
    </parent>
</div>

<script>
    Vue.component('parent', {
        template: "<div class='parent'>PARENT</div>",
        mounted: function(){
            console.log("PARENT MOUNTED");
        }
    })
    Vue.component('child', {
        template: "<div class='child'>CHILD</div>",
        mounted: function(){
            console.log("CHILD MOUNTED");
        }
    })

    new Vue({
        el: "#app"
    })
</script>

控制台：已安装家长

页面：PARENT

=====================可视化代码示例====================== ==

<div id="app">
  <v-app id="inspire">
    <v-form v-model="valid">
      <v-text-field
        v-model="name"
        :rules="nameRules"
        :counter="10"
        label="Name"
        required
      ></v-text-field>
      <v-text-field
        v-model="email"
        :rules="emailRules"
        label="E-mail"
        required
      ></v-text-field>
    </v-form>
  </v-app>
</div>

Answer 1

请参见component slot。

在下面的更新代码中，我只是在父组件中插入了<slot></slot>，以便在用作父组件的内容时呈现子组件。

    Vue.component('parent', {
        template: "<div class='parent'><slot></slot></div>",
        mounted: function(){
            console.log("PARENT MOUNTED");
        }
    })
    Vue.component('child', {
        template: "<div class='child'>CHILD</div>",
        mounted: function(){
            console.log("CHILD MOUNTED");
        }
    })

    new Vue({
        el: "#app"
    })

<div id="app">
    <parent>
        <child></child>
    </parent>
</div>

可以在Vue中渲染子组件吗？

1 个答案: