Vue 组件的定义和使用

逃离我推掉我的手 2022-03-25 15:40 302阅读 0赞

#### 怎样在Vue中定义组件并使用它？其实很简单！ ####

在看懂我接下来的代码之前需要先把下面这幅图看懂 ！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]  
图应该很好理解，App.vue是一个根组件。此根组件包含一个首页组件和一个新闻组件，首页组件和新闻组件同时又包含头部组件。那么代码开始了。  
**App.vue（根组件）**

<template>
      <div id="app">
      <v-home></v-home>   
      <hr>
      <br>
      <v-news></v-news>   
      </div>
    </template>
    
    <script> /* 1.引入组件 2.挂载组件 3.在模板中使用 */ import Home from './components/Home.vue'; //引入首页组件 import News from './components/News.vue'; //引入新闻组件 export default { data(){ return { msg:'今天是个好天气' } }, components:{ /* 前面的组件名称不能和HTML标签一样*/ 'v-home':Home, //挂载Home组件 'v-news':News, //挂载新闻组件 } } </script>
    
    <style> </style>

越深入学习vue，就会发现根组件越简单，往往都是引入其他的组件。我已在代码中做了很详细的注解。接下来是各个引入的组件。

**Home.vue（首页组件）**

<template>
        
        <div id="home"> 
            <v-header></v-header>
            <br>
            <h2>这也是一个首页组件---{
       {msg}}</h2>
            <button @click="run()">执行run方法</button>
        </div>
    </template>
    
    
    <script> //引入头部组件 import Header from './Header.vue'; export default { data(){ return{ msg:'我是一个首页组件', } }, methods:{ run(){ alert(this.msg); } }, components:{ 'v-header':Header, } } </script>
    
    <style lang="css" scoped> /* css 局部作用域 scoped*/ h2{ color:red; } </style>

其组件的定义和使用都是一样的，style中的scoped表示局部作用域，该样式只针对Home.vue 使用。

**News.vue（新闻组件）**

<template>
        <div>
            <v-header></v-header>
            <h2>这是一个新闻组件</h2>
            <ul>
                <li>aaaaaa</li>
                <li>bbbbb</li>
                <li>cccccc</li>
                <li>ddddd</li>
            </ul>
    
        </div>
    </template>
    <script> import Header from './Header.vue';//引入头部组件 export default { data(){ return{ msg:'我是一个新闻组件' } }, components:{ 'v-header':Header, } } </script>
    <style scoped> </style>

看到这里应该是知道如何定义和使用组件了吧，News.vue和Home.vue都引用了Header.vue,其步骤也是一样的

**Header.vue（头部组件）**

<template>
        <div>
            <h2 class="header">这是一个头部组件</h2>
    
        </div>
    </template>
    <script> export default { data(){ return{ msg:'我是一个头部组件' } } } </script>
    <style scoped> .header{ background:black; color: gainsboro; } </style>

最后的运行效果是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]  
例外，还有一个要注意的问题就是导入组件的路径问题，我在导入时也犯了个小错：  
![在这里插入图片描述][20190121162953871.png]

import Home from './components/Home.vue';   //引入首页组件
    import News from './components/News.vue';   //引入新闻组件

import Header from './Header.vue';//引入头部组件

一定要看清你自己的目录结构。

若有任何疑问或是不解，请在下方评论，谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220325/2c60336a17a2466cadfcde84e58506b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]: /images/20220325/4b6c6bf742c54704a263455c4417aad2.png
[20190121162953871.png]: /images/20220325/abb47482733845708218044c6894807b.png