vue组件嵌套（简易实战）

最新推荐文章于 2025-03-18 09:21:26 发布

甜甜的柠檬

最新推荐文章于 2025-03-18 09:21:26 发布

阅读量1.5k

点赞数 1

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/qq_25434453/article/details/98077700

版权

VUE 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Vue项目中进行组件嵌套。通过在components目录下创建自定义组件test.vue，并在App.vue中引入和使用，实现组件的调用。步骤包括创建组件、引入组件及展示结果。

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

创建脚手架项目后，怎么在App.vue调用其他组件呢

方法

1.在components创建自己的组件，这里创建test.vue

<template>
	<div class="testWra01">
		<div class="add_w">
			<input type="text" v-model='food_name' placeholder='请输入想要增加的菜品名称' />
			<span @click='addFood()'>添加</span>
			<p class="clear"></p>
		</div>
		<div class="add_list">
			<ul>
				<li v-for='data in datalist'>
					{{data}}
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default{
		name:"Test",
		data(){
			return{
			datalist:['红烧排骨','青菜豆腐','烤鸭','白灼秋葵'],
			food_name:''
			}
		},
		methods:{
			addFood(){
				this.datalist.push(this.food_name)
			}
		}
	}
</script>
// scoped  作用域    style可以多个
<style lang="css" scoped>
*{font-size:16px;}
.clear{width:0;height:0;padding:0;margin:0;clear:both;}
ul li{list-style: none}
input:focus{outline:none;}
.testWra01 .add_w{background:#fff;padding:0;border:1px solid #d6000f;border-radius:5px;width: 280px;margin:0 auto;}
.testWra01 .add_w input{padding:10px;border:none;background:none;float:left;}	
.testWra01 .add_w span{display:inline-block;padding:10px;background:#d6000f;color: #fff;float: right;border-top-right-radius:5px;border-bottom-right-radius:5px;cursor: pointer}
.add_list ul li{display:inline-block;padding:7px;background:#dfdfdf;color:#333;margin-right:10px;border-radius:5px;}
</style>

2.在App.vue中引入

<template>
  <div id="app">
	   <h1>增加菜品</h1>
	   <test></test>
  </div>
</template>

<script>
import test from './components/test'
export default {
  name: 'App',
  components:{
    test
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3.结果
在这里插入图片描述