Vue.js如何导入新组件

最新推荐文章于 2024-08-21 09:30:42 发布

chainbees

最新推荐文章于 2024-08-21 09:30:42 发布

阅读量8.5k

点赞数 2

分类专栏： vue

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_33867131/article/details/81235750

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、新建组件：components/Test.vue

<template>
  <div>
    {{title}}
  </div>
</template>

<script>
    export default {
        name: "Test",

        data () {
          return {
            title: '我擦嘞！！！',
            type: 'A',
            user: {
              name: '小甲',
              age: '19',
              sex: '男'
            },

          }
        }

    }
</script>

<style scoped>

</style>

2、主组件App.vue这样写
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 3.在template中就可以直接使用了 -->
    <Test></Test>

  </div>
</template>

<script>
  // 1.使用import导入你子组件
  import Test from "./components/Test";
export default {
  name: 'App',
  // 2.写入子组件
  components: {Test}
}
</script>

<style>

</style>