vue组件化

已于 2022-02-10 14:26:44 修改
阅读量712 收藏 3
点赞数 3
分类专栏： VUE 文章标签： vue.js 前端 javascript
于 2022-02-10 11:46:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/122854656
版权

vue组件化

1、什么是组件化？

在这里插入图片描述

2、vue的组件化思想

在这里插入图片描述

3、注册组件的基本步骤

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
  <div id="app">
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    // 1、创建组件构造器
    const cpnC = Vue.extend({
      template: `
        <div>
          <h1>标题</h1>
          <h2>内容</h2>
          <h2>内容</h2>
          <hr></hr>
        </div>
      `
    })
    // 2、注册组件
    Vue.component('my-cpn',cpnC);

    const app = new Vue({
      el: '#app',
      data: {
        message:'你好'
      },
      methods: {
      
      }
    });
  </script>
</body>

</html>

4、注册组件步骤解析

在这里插入图片描述
在这里插入图片描述

5、全局组件与局部组件

5.1、全局组件

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
  <div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>

  <div id="app2">
    <cpn></cpn>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    // 1、创建组件构造器
    const cpnC = Vue.extend({
      template:`
        <div>
          <h1>标题</h1>
          <p>内容</p>
        </div>
      `
    })
    //2、注册组件(全局组件，意味着可以在多个vue的实例下使用)
    Vue.component('cpn',cpnC)
    
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好'
      },
      methods: {
      
      }
    });
    const app2 = new Vue({
      el: '#app2',
      data: {
        message:'你好'
      },
      methods: {
      
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

5.2、局部组件

在这里插入图片描述
在这里插入图片描述

6、父组件与子组件

6.1、父子组件的写法

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
  <div id="app">
    <cpn2></cpn2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    // 1、创建子组件
    const cpnC1 = Vue.extend({
      template: `
        <div>
          <h1>标题1</h1>
          <p>子组件1内容</p>  
        </div>
      `
    })
    // 1、创建父组件
    const cpnC2 = Vue.extend({
      template:`
      <div>
        <h1>标题2</h1>
        <p>子组件2内容</p>
        <cpn1></cpn1>  
      </div>
    `,
    components: {
      cpn1: cpnC1
    }
    })
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好'
      },
      methods: {
      
      },
      components:{
        cpn2: cpnC2
      }
    });
  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

6.2、父子组件的错误用法

在这里插入图片描述

6.3、注册组件的语法糖写法

在这里插入图片描述

  • 注册全局组件语法糖写法
    在这里插入图片描述
  • 注册局部组件语法糖写法
    在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
  <div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    // 全局组件注册的语法糖写法
    // 1、创建组件构造器
    // const cpn1 = Vue.extend();

    // 2、注册全局组件语法糖写法
    Vue.component('cpn1',{
      template: `
          <div>
            <h1>标题（全局组件）</h1>  
            <h1>内容（全局组件）</h1>  
          </div>
      `
    })
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好'
      },
      methods: {
      
      },
      // 注册局部组件语法糖写法
      components: {
        cpn2: {
          template: `
            <div>
              <h1>标题（局部组件）</h1>  
              <h1>内容（局部组件）</h1>  
            </div>
          `
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

7、组件模板抽离的两种写法

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
  <div id="app">
    <cpn1></cpn1>
  </div>

  <!-- 1、将模板代码写到script标签中 -->
  <!-- <script type="text/x-template" id="cpnC1">
    <div>
      <h1>标题</h1>
      <p>内容</p>
    </div>
  </script> -->

  <!-- 2、写道template标签中 -->
  <template id="cpnC1">
    <div>
      <h1>标题</h1>
      <p>内容</p>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    // 注册组件
    Vue.component('cpn1',{
      template: '#cpnC1'
    })
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好'
      },
      methods: {
      
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

8、组件可以访问vue实例吗

在这里插入图片描述

9、组件数据的存放

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
  <div id="app">
    <cpn1></cpn1>
  </div>

  <!-- 1、将模板代码写到script标签中 -->
  <!-- <script type="text/x-template" id="cpnC1">
    <div>
      <h1>标题</h1>
      <p>内容</p>
    </div>
  </script> -->

  <!-- 2、写道template标签中 -->
  <template id="cpnC1">
    <div>
      <h1>{{title}}</h1>
      <p>内容</p>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    // 注册组件
    Vue.component('cpn1',{
      template: '#cpnC1',
      data(){
        return {
          title: 'abc'
        }
      }
    })
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好'
      },
      methods: {
      
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

10、为什么组件data必须是函数

10.1、不是函数的情况

组件data不是函数的情况，代码如下。当点击了页面任何一个按钮，其他两个组件也会受到影响。

在这里插入图片描述
在这里插入图片描述当data不是函数时：
在这里插入图片描述可以看如下函数的创建过程：
在这里插入图片描述

10.2、是函数的情况

data是函数的情况，点击按钮时，只会影响该组加，不会影响其他区组件。
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
  <div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>

  <template id="cpn1">
    <div>
      <h1>计数器：{{counter}}</h1>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </div>
  </template>
  <script src="../js/vue.js"></script>

  <script>
    // const obj = {
    //   counter:0
    // }

    Vue.component('cpn',{
      template: '#cpn1',
      data(){
        return {
          counter: 0
        }
      },
      // data(){
      //   return obj
      // },
      methods: {
        increment(){
          this.counter++
        },
        decrement(){
          this.counter--
        }
      }
    })

    const app = new Vue({
      el: '#app',
      data: {
        message:'你好'
      },
      methods: {
      
      }
    });
  </script>
</body>

</html>
小码哥呀
关注
专栏目录
Vue组件化
SAKURE2210866448的博客
11-03 230
组件化整理 一、什么是组件化 组件的使用分为三个步骤： 创建组件构造器 注册组件 使用组件 1.构建组件构造器对象 const cpnC=Vue.extend({ template:` <div> <h2>我是标题</h2> <p>我是内容，哈哈哈哈</p> <p>我是内容，呵呵...
vue组件化编程-todoList案例.zip
07-14
在“vue组件化编程-todoList案例.zip”中，我们可以深入学习如何使用Vue进行组件化开发，构建一个基本的待办事项（Todo List）应用。这个案例将涵盖以下关键知识点： 1. **Vue组件基础**： - 组件是Vue的核心特性...
Vue 组件化
XWenXiang的博客
06-29 653
组件简单来说就是将代码封装，便于后续重复使用，被封装的代码可以包含多种例如 html、css、js。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树 流程 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 、、、 以及等。除了像 这样根实例特有的选项。还有需要注意的是 必须是函数。局部注册可以写在 Vue 实例或者 组件实例中。 或 注意点：组件之间数据默认不互通，如下所示 此时可以将全局看成是父，局部是子 根实例
学习vue3四 (全局，局部，递归，动态组件 和 插槽)
tian_liang_jia的博客
08-05 926
表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的
VUE的组件化
weixin_45617525的博客
01-11 701
VUE的组件化 什么是VUE的组件化 组件化是VUE的精髓，VUE及时由一个一个组件构成的。VUE的组件化涉及到的内容非常多。例如如页面，页面就是由一个个组件构成的，比如导航，列表，弹框，搜索框和下拉框等等… 页面只不过是这些组件的容器，组件自由组合形成功能完善的界面，当不需要某个组件的时候，或者想要替换某个组件时，可以随时进行替换和删除，这些操作都不会影响到整个应用程序的运行。 VUE组件化的好处 （1）实现了html的封装和重用，在构建单页面应用方面有这独一无二的优势。 （2）大大提高了开发效率，并且
某课网 前端面试项目冲刺 京东金融Vue组件化实战 vue实战视频 无快进完整版
11-26
某课网 ：前端面试项目冲刺 京东金融Vue组件化实战 vue实战教学视频 无快进 完整版 亲测可用 Vue+webpack
Vue组件化.md 组件化学习
最新发布
09-24
Vue组件化(任务)
06_Vue组件化开发基础.pptx
01-25
"06_Vue组件化开发基础" 本资源摘要信息主要介绍了Vue组件化开发的基础知识，包括组件化开发的思想、注册Vue的全局组件、注册Vue的布局组件、Vue的开发模式解析、Vue的项目目录分析等内容。 一、组件化开发思想 ...
vue京东金融Vue组件化实战、活动页、众筹、白条视频教程
07-01
[vue]京东金融Vue组件化实战 [vue]京东金融Vue组件化实战 配置eslint-2.mp4 29.8MB 配置eslint-1.mp4 124.3MB project.zip 0.1MB Finance.zip 0.1MB 9-2 活动页（2）.mp4 99.5MB 9-1 活动页（1）.mp4 90.7MB ...
Vue插槽、编译作用域及编译作用域插槽
zhaohan___的博客
11-18 587
文章目录slot插槽匿名插槽具名插槽对插槽进行命名编译作用域作用域插槽例子github 例子地址 slot插槽 匿名插槽 模板中使用插槽则增加标签，标签内部的html代码则是默认值 <template id="templates"> <div> <h1>按钮</h1> <slot><p>默认插槽</p></slot> <button v-for="(i
Vue - 组件化
qq_33962481的博客
07-31 219
文章目录一、什么是组件化二、为什么需要组件化三、注册组件的基本步骤1. 创建组件构造器2. 注册组件3. 使用组件三、 一、什么是组件化 将一个复杂的问题, 拆分成很多个可以处理的小问题, 再将其放在整体中. 在处理页面的时候, 我们可以将一个完整的页面分成很多个组件 每个组件都用于实现页面的一个功能块 二、为什么需要组件化 有了组件化的思想, 我们可以尽可能的将页面拆分成一个个小的, 可复用的组件. 可以让代码更加方便组织和管理, 并且扩展性也更强 三、注册组件的基本步骤 1. 创建组件构造
Vue组件化通讯实战与生命周期详解
"Vue组件化通讯实例代码详解" 在Vue.js中，组件化是其核心特性之一，它使得应用程序结构更加模块化，易于维护和复用。本篇文档主要介绍如何通过实例代码来理解Vue组件之间的通讯机制。让我们一步步深入学习。 首先...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值