单文本组件的创建和嵌套引用

最新推荐文章于 2024-10-29 22:28:20 发布

MarvinCC

最新推荐文章于 2024-10-29 22:28:20 发布

阅读量150

点赞数

文章标签： vue js javascript

本文链接：https://blog.youkuaiyun.com/qq_43672268/article/details/106147428

版权

本文详细介绍了如何在Vue项目中创建并嵌套使用子组件，包括父组件(app.vue)和子组件(child.vue)的定义及引用过程，帮助读者理解单文本组件的基础概念和实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单文本组件的创建和嵌套引用

前言：关于单文本组件，我对于基础概念一直不是很懂，终于，通过自己的了解，写出这篇文章，防止遗忘。

1.创建一个父组件：

// app.vue
<template>
  <div id='app'>
  </div>
</template>

<script>
export default {
}
</script>

<style lang='less' scoped>
</style>

2.另外一个子组件：

// child.vue
<template>
  <div>
    我是子组件的模板
  </div>
</template>

<script>
export default {
    // name属性是必须的
  name: 'children',
  data() {
    return {}
  },
  methods: {},
  created() {},
}
</script>

<style lang="less" scoped></style>

3.那怎么实现在app.vue中嵌套child.vue呢，那当然是定义child.vue为app.vue的子组件了。看代码

<template>
  <div id='app'>
  </div>
  <!-- 使用子组件 -->
  <my-component></my-component>
</template>

<script>
// 引入子组件模板
import child from './children'
export default {
  name: 'app',
  data () {
    return {
      
    }
  },
  // 定义子组件
  components: {
   "my-component": child
  }
}
</script>

<style lang='less' scoped>
</style>