Vue实战之Vue中组件(component)

9.冄2.7.號

已于 2023-02-27 04:58:50 修改

阅读量1.2w

点赞数 9

文章标签： vue

于 2021-08-01 11:07:41 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44950987/article/details/119202091

版权

文章目录

Vue 实战
- 十二、Vue 中组件（component）

Vue 实战

十二、Vue 中组件（component）

1、组件作用

组件作用：用来减少Vue实例对象中代码量，日后在使用Vue开发过程中，可以根据不同业务功能将页面中划分为不同的多个组件，然后由多个组件去完成整个页面的布局，便于日后使用Vue进行开发时页面管理，方便开发人员维护。

在这里插入图片描述

2、组件使用

（1）全局组件祖册

说明：全局组件直接注册给Vue实例，日后可以在任意Vue实例的范围内使用该组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>{
  {msg}}</h1>
    <!--2.使用全局组件，在Vue实例范围内-->
    <!--登录-->
    <login></login>
    <!--注册-->
    <register></register>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    // 1.定义一个全局组件，参数1：组件名称 参数2：组件的配置对象
    Vue.component(`login`, {
     
        template: `<div><h2>用户登录</h2> <form action=""></form></div>`
    });
    Vue.component(`register`, {
     
        template: `<div><h2>用户注册</h2> <form action=""></form></div>`
    })

    var app = new Vue({
     
        el: "#app",
        data: {
     
            msg: "Vue中组件之全局组件的使用"
        }
    })
</script>

注意

Vue.component() ：用来开发全局组件

参数1：组件的名称

参数2：组件配置{}对象

template：·· 用来书写组件的 html 代码 template 中必须有且只有一个root元素

使用时需要在Vue的作用范围内根据组件名称使用全局组件

如果在注册组件过程中使用驼峰命名组件的方式在使用组件时必须将驼峰的所有单词小写加入 - 线进行使用

注意：无论使用全局组件还是局部组件都必须在组件template中加入唯一根元素

在这里插入图片描述

（2）局部组件注册（用的最多）

说明：通过将组件注册给对应Vue实例中一个 components 属性来完成组件注册，这种方式不会对Vue实例造成叠加

第一种开发方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>{
  {msg}}</h1>
    <!--局部组件使用，在Vue实例作用范围内-->
    <!--用户登录-->
    <login></login>
    <!--用户添加-->
    <add></add>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    // 局部组件登录模板声明
    let login = {
      // 具体局部组件名称
        template: `<div><h2>用户登录</h2></div>`
    }

    const app = new Vue({
     
        el: "#app",
        data: {
     
            msg: "Vue中组件之局部组件的使用"
        },
        methods: {
     },
        computed: {
     },
        components: {
      // 用来注册局部组件
            // login: login,
            // 简写
            login, // 登录局部组件
            add: {
      // 添加局部组件
                template: `<div><h2>用户添加</h2> <form action=""></form></div>`
            }
        }
    })
</script>

第二种开发方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>{
  {msg}}</h1>
    <!--4.局部组件使用，在Vue实例作用范围内-->
    <!--用户登录-->
    <login></login>
</div>
<!--1.声明局部组件模板  template 标签 注意：在Vue实例作用范围外声明-->
<template id="loginTemplate">
    <h1>用户登录</h1>
</template>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    //2.定义变量用来保存模板配置对象
    let login = {
     //具体局部组件名称
        template: `#loginTemplate` //使用自定义template标签选择器即可
    }
    const app = new Vue({
     
        el: "#app",
        data: {
     
            msg: "Vue中组件之局部组件的使用"
        },
        methods: {
     },
        computed: {
     },
        components: {
      //用来注册局部组件
            //login:login,
            //简写
            login, //3.注册组件
        }
    })
</script>

（3）Vue组件中定义data、methods、computed、生命周期函数以及子组件

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>{
  {msg}}</h1>
    <!--使用组件: 直接通过组件名-->
    <login></login>
    <register></register>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    Vue.component('register', {
     
        template: `<div><h3>我是注册</h3><span>{
      {msg}}</span></div>`,
        data() {
     
            return {
     
                msg: "我是注册全局组件中数据"
            }
        }
    });

    //登录组件配置对象
    const login = {
     
        template: `<div id="aa">
                      <h2>用户登录</h2>
                      <h2>{
      {counter}}---{
      {msg}}---{
      {counterSqrt}}---{
      {counterSqrt}}----{
      {counterSqrt}}</h2>
                      <button @click="test(10)">点我counter++</button>