vue组件嵌套（简易实战）

系统管理员 2021-11-09 18:26 1100阅读 0赞

创建脚手架项目后，怎么在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.结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDM0NDUz_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDM0NDUz_size_16_color_FFFFFF_t_70]: /images/20211109/c5d0fc432a8d47569fdd3a1f197802ee.png