vue组件的使用

下雪不过冬天

已于 2022-01-25 12:17:57 修改

阅读量397

点赞数 2

分类专栏： vue 文章标签： vue.js 前端 javascript vue

于 2021-06-28 19:08:54 首次发布

本文链接：https://blog.csdn.net/m0_56232007/article/details/118301254

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

一、组件的初步认识
二、组件中的data为何是个函数？
- - 2.2 为何是个函数的解释
三、动态组件
- - 3.1 动态组件写法一
  - 3.1 动态组件写法二
四、生命周期
- - 4.1 什么是生命周期？
  - 4.2 vue的生命周期可以分为三大阶段：
五、组件通信

一、组件的初步认识

1.1 使用组件的原因？

为了提高代码的复用性。

1.2 组件本质是什么？

可复用的vue实例。组件需要注册后才可以使用。
分为全局组件和局部组件。组件体现形式就是页面上的自定义标签。

1.3 全局组件

Vue.component(“标签名”,配置对象);

【注意点】
  1.全局组件必须写在创建实例之前。
  2.每一个组件只有一个根元素。
  3. template标签相当于一个占位符。它在页面中默认是隐藏的。可以帮助我们去创建模板内容。

1.3.1 全局组件的写法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
 
  <!-- 全局组件 -->
  <div id="app">
    <v-tab></v-tab>
  </div>

    <template id="zj">
      <div>
        <h1>vue组件化学习</h1>
      </div>
    </template> 
  <script src="./js/vue.min.js"></script>
  
  <script>
 // 3、创建组件配置对象
  let vzujian = {
    template:"#zj"
  }

  //  1、注册全局组件
  Vue.component("v-tab",vzujian);

  // 2、创建vue实例
  let app = new Vue({
    el:"#app",
    
  })

  </script>
 
</body>

</html>

1.4 局部组件的写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <v-tmp></v-tmp>
    <child></child>
    <v-tab> </v-tab>
  </div>
  <template id="zujian">
    <div>
      <p>我是段落1</p>
      <h1>自定义组件 </h1>
      <p>我是段落2</p>
    </div> 
  </template>

  <script src="./js/vue.min.js"></script>

  <script>
    // 1、注册局部组件
    let app = new Vue({
      el: "#app",
      components: {
        "v-tab": {
          template: "#zujian"
        }
      }
    })
  </script>
</body>
</html>

二、组件中的data为何是个函数？

在这里插入图片描述

2.2 为何是个函数的解释

1、首先创建一个名字为counter的组件，data函数中返回一个外部定义的对象的值，如果直接给data属性设置一个对象而不是函数，那么会在浏览器中直接报错

2、在浏览器中运行代码
每次点击+1按钮，下边的值就会加一

3、如果我们在页面上同时使用三个counter组件。
点击任意一个+1按钮，三个数同时变化。因为它们都指向了同一个对象。我们当然希望点击不同的按钮只实现当前组件内数据的变化，那么，我们在函数中返回一个对象，每次创建一个组件的时候，在内存中同时开辟一块空间给当前组件存放data，这样，就不会出现共用一个data的现象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    {{msg}}
    <abc></abc>
    <abc></abc>
    <abc></abc>
  </div>
  <template id="tmp">
    <button @click="add">你点击了{{counter}}次</button>
  </template>
  <script src="./js/vue.min.js"></script>
  <script>
    let data = {
      counter:0
    }
    //1.创建组件的配置对象
    let options = {
      template: `#tmp`,
      data(){
        return {
          counter:0
        };
        return data;
      },
      methods:{
        add(){
          this.counter++;
        }
      }
    }
    //2.注册全局组件
    Vue.component("abc", options);
    let app = new Vue({
      el: "#app",
      data: {
        msg: "app实例"
      },
      methods: {
        say() {
          console.log("拜拜了各位");
        }
      }
    })
  </script>
</body>

三、动态组件

3.1 动态组件写法一

在这里插入图片描述

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="change">切换页面</button>
    <v-home v-if="isShow"></v-home>
    <v-list v-else></v-list>   
  </div>
  
  <script src="./js/vue.min.js"></script>
  <script>
    // 3、配置对象
    let home = {
      template:"<div>主页界面</div>"
    }
    let list = {
      template:"<div>列表页面</div>"
    }

    // 1、注册全局组件
    Vue.component("v-home",home);
    Vue.component("v-list",list);
    // 2、创建vue实例
    let app = new Vue({
      el:"#app",
      data:{
        isShow:true,
      },
      methods:{
        change(){
          this.isShow = !this.isShow;
        }
      }
    })
  </script>
</body>
</html>

3.1 动态组件写法二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button @click="change">切换页面</button>
    <!-- <v-home v-if="isShow"></v-home>
    <v-list v-else></v-list> -->
    <component v-bind:is="dname"></component>
  </div>
 
  <script src="./js/vue.min.js"></script>
  <script>
    // 3、配置对象
    let home = {
      template:"<div>主页界面</div>"
    }
    let list = {
      template:"<div>列表页面</div>"
    }
    // 1、注册全局组件
    Vue.component("v-home",home);
    Vue.component("v-list",list);
    // 2、创建vue实例
    let app = new Vue({
      el:"#app",
      data:{
        // isShow:true,
        dname:"v-list"
      },
      methods:{
        change(){
          this.dname = this.dname == "v-home"?"v-list":"v-home";
        }
      }
    })
  </script>
</body>
</html>

四、生命周期

4.1 什么是生命周期？

vue组件从创建，到更新，最后到消亡，这样的一个周期就是vue的生命周期。

生命周期钩子其实就是一些特殊的函数。

4.2 vue的生命周期可以分为三大阶段：

1、挂载（创建）阶段。 vue创建的时候就会执行

beforeCreate
create
beforeMount
mounted

2、更新阶段。当data中的数据发送了变化，才会执行

beforeUpdate
update

3、销毁阶段。 vue销毁的时候就会执行

beforeDestroy
destroyed

五、组件通信

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <father></father>
  </div>
  <!-- 模板区域 -->
  <template id="father">
    <div>
      <p>我是父组件{{msg}}</p>
      <son :father-name="msg"></son>
    </div>
  </template>

  <template id="son">
    <div>
      <p>我是子组件{{fatherName}}</p>
    </div>
  </template>

  <script src="./js/vue.min.js"></script>
  <script>
    let son = {
      template: "#son",
      // 子组件要显式地用 props 选项声明它期待获得的数据
      props: ['fatherName']
    }
    let father = {
      template: "#father",
      data() {
        return {
          msg: "周润发"
        }
      },
      components: {
        son
      }
    }

    // 注册组件
    Vue.component("father", father);

    let app = new Vue({
      el: "#app"
    })
  </script>
</body>
</html>

下雪不过冬天

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
vue组件的使用

文章目录一、组件的初步认识1.1 使用组件的原因？1.2 组件本质是什么？1.3 全局组件1.3.1 全局组件的写法：1.4 局部组件的写法二、组件中的data为何是个函数？2.2 为何是个函数的解释三、动态组件3.1 动态组件写法一3.1 动态组件写法二四、生命周期4.1 什么是生命周期？4.2 vue的生命周期可以分为三大阶段：五、组件通信一、组件的初步认识1.1 使用组件的原因？为了提高代码的复用性。1.2 组件本质是什么？可复用的vue实例。组件需要注册后才可以使用。分为全局组
复制链接

扫一扫