Vue.js框架--创建单个组件和组件的使用（九）

r囧r小猫 2024-02-18 23:28 12阅读 0赞

**主要操作技能：**

1.创建单个组件

![70][]

2.应用组件步骤

a）引入组件  import Home from './components/Home.vue';
           b）挂载组件
               components: { 
                   'v-home': Home
              }
           c）在模板中使用组件
              <v-home></v-home>

项目如下：

![70 1][]

**编写代码：**

**App.vue**

<template>
    	<div id="app">
    		
    		
    		<v-home></v-home>
    		<br /><br />
    		<hr />
    		<v-news></v-news>
    
    	</div>
    </template>
    
    <script>
    	import Home from './components/Home.vue'; //1.引入组件
    	import News from './components/News.vue';
    	export default {
    		name: 'app',
    		data() { //业务逻辑的数据
    			return {
    				msg: 'hello'
    			}
    		},
    		components: { //2.挂载组件
    			/*前面组件名称不能与html标签相同*/
    			'v-home': Home,
    			'v-news': News
    		}
    	}
    </script>

**Home.vue**

<template>
    	
    	<div>
    		<v-header></v-header> 
    		<h2>首页组件</h2>
    		<button @click="run()">execute</button>
    	</div>
    </template>
    
    <script>
    	import Header from './Header.vue'; //1.引入头部组件
    	export default {
    		data() { //数据
    			return {
    				msg: '我是首页组件'
    			}
    		},
    		methods: { //方法
    			run() {
    				return alert(this.msg);
    			}
    		},
    		components:{ //2.挂载组件
    			'v-header':Header  
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    /*css 局部作用域scoped	*/
    	h2{
    		color:red;
    	}
    </style>

**News.vue**

<template>
    	 <div>
    	 	<v-header></v-header>
    	 	<br/><br />
    
    	 	
    	 	<h2>{
       {msg}}</h2>
    	     <ul>
    	     	<li>apple</li>
    	     	<li>banana</li>
    	     	<li>pear</li>
    	     </ul>
    	 </div>
    </template>
    
    <script>
    	//1.引入头部组件
    	import Header from './Header.vue';
    	export default{
    		data(){
    			return{
    				msg:'这是一个苹果组件哦哦!'
    			}
    		}, 
    		components:{ //2.挂载组件
    			'v-header':Header
    		}
    	}
    </script>
    
    <style lang="scss">
    </style>

**Header.vue**

<template>
    	<div>
    		<h2 class="bg">{
       {msg}}</h2>
    	</div>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				msg:'这是一个头部组件'
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
      .bg{
      	background:dimgray;
      	color:#fff;
      }
    </style>

**效果：**

![70 2][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b3b0fd9e293c496b85aa1a370cc7badc.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a8ac47e48ae34082a1a3c5c9d5cfc5e5.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/44ec0602943b433b9e9e0fa66bdd87b0.png