Vue组件化学习（一）

最新推荐文章于 2023-07-18 10:59:54 发布

hejianghaoswu

最新推荐文章于 2023-07-18 10:59:54 发布

阅读量94

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/hejianghaoswu/article/details/119008853

版权

一、什么是组件化

将页面拆分成一个个功能块，每个功能块完成属于自己部分的独立功能，可以将这些功能块称为组件

二、注册组件的基本步骤

调用Vue.extend()方法创建组件构造器

    const cpn = Vue.extend({
      template:`<h1>hello</h1>`
    })

2.调用Vue.component()方法注册组件

Vue.component('cpn',cpn)

在Vue实例的作用范围内使用组件

<div id="app">

  <cpn></cpn>

</div>

三、全局组件和局部组件

在Vue实例外注册的组件是全局组件，在不同的Vue实例作用范围内都可以使用，而注册在某一Vue实例内的组件只能在该Vue实例作用范围内使用

四、父组件和子组件

组件和组件之间存在层级关系：如果一个组件注册在另一个组件的构造器中，则称这个组件是其的子组件。

注意：子组件不能以标签的形式在父组件的父组件中使用，即父组件只能识别自己的子组件，不能识别孙子组件

五、组件模板抽离

组件的模板可以写在<template></template>标签中

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/vue.js"></script>

  <template id="cpn1">
    <h1>hello</h1>
  </template>
  <script>
    Vue.component('cpn',{
      template:"#cpn1"
    })

  </script>

  <script>
    window.onload=function () {
      let app = new Vue({
        el: "#app",
      })
    }

  </script>

</head>
<body>

<div id="app">

  <cpn></cpn>

</div>

</div>

</body>
</html>

六、组件中的data必须是函数

组件中的data必须以函数的形式存在，并且函数的结果要return一个对象。
原因是以函数结果return对象保证了多个相同的组件调用data时候的数据具有独立性，互不干扰，因为每个对象数据都有单独的内存地址。

hejianghaoswu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件化学习（一）

一、什么是组件化将页面拆分成一个个功能块，每个功能块完成属于自己部分的独立功能，可以将这些功能块称为组件二、注册组件的基本步骤调用Vue.extend()方法创建组件构造器 const cpn = Vue.extend({ template:`<h1>hello</h1>` })2.调用Vue.component()方法注册组件Vue.component('cpn',cpn)在Vue实例的作用范围内使用组件<div id=
复制链接

扫一扫