Vue.js - 如何在父组件中使用子组件

Question

我在文件Usage.vue中有父组件，我想显示子组件（Filter.vue）。

这就是Usage.vue：

 <template >
  <div class="st-view-wrap">
    <st-filter></st-filter>
    <h1>USAGE</h1>
    <st-filter></st-filter>
    <st-filter></st-filter>
    <st-filter></st-filter>
    <st-filter></st-filter>

  </div>

</template>

<script>
  import Vue from "vue";

  export default new Vue({
    name: 'st-usage',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  });
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .st-view-wrap{
    background: blue;
    width: 100%;
    height: 100%;
  }
</style>

这是我的Filter.vue：

<script>
  import Vue from "vue";

  export default Vue.component('st-filter', {
    template: `<h1>This is a todo</h1>`
  })
</script>

在Usage.vue中使用了什么？

Answer 1

好的让它运转起来：

孩子：

<script>
  import Vue from "vue";

  export default Vue.component('st-filter', {
    template: `<h1>This is a todo</h1>`
  })
</script>

父：

<template >
  <div class="st-view-wrap">
    <h1>USAGE</h1>
    <st-filter></st-filter>
  </div>
</template>

<script>
  import Vue from 'vue';
  import Filter from './shared/filter/Filter';

  export default new Vue({
    name: 'st-usage',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: {
      'st-filter': Filter
    }
  });
</script>