11-Vue的组件化开发(一)

组件化的基本使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <!-- 3.使用组件 -->
      <my-cpn></my-cpn>
      <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>
                <h2>我是标题</h2>
                <p>我是内容</p>
                <p>我是内容</p>
            </div>`
      })
      // 2.注册组件
      Vue.component("my-cpn", cpnC)

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

1.什么是组件化

我的个人理解是将一部分代码拿出来，以备别处调用。学过面向对象的都应该知道，重复代码要封装，这个也间是类似的，比如将一个导航栏封装成一个组件，多个页面都要用到导航栏调用即可。组件化开发的两大优势：

分类明确，方便管理和维护。
解决了重复代码问题，使得代码可以随时复用。

2.组件化开发步骤

使用Vue.extend()创建组件构造器对象
使用Vue.component()注册组件
使用组件

详细代码如下：

<!-- 1.创建组件构造器对象 -->
const cpnC = Vue.extend({
	template: `
		<div>
			<h2>我是标题</h2>
			<p>我是内容</p>
			<p>我是内容</p>
		</div>
	`
})
<!-- 2.注册组件 -->
Vue.component("my-cpn", cpnC)
<!-- 3.使用组件 -->
<my-cpn></my-cpn>

效果图如下：
在这里插入图片描述

全局组件和局部组件

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

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

    <div id="app2">
      <cpn></cpn>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      // 1.创建组件构造器
      const cpnC = Vue.extend({
     
     
        template: `
            <div>
                <h2>我是标题</h2>
                <p>全局组件和局部组件都使用我了</p>
            </div>`
      })
      // 2.1.注册全局组件(意味着可以在多个Vue的实例下使用)
      Vue.component('cpn', cpnC)

      // 2.2.注册局部组件
      const app = new Vue({
     
     
        el: "#app",
        data: {
     
     
          message: "你好"
        },
        components: {
     
     
          // cpn是使用组件时的标签名
          cpn: cpnC
        }
      })

      const app2 = new Vue({
     
     
        el: "#app2",
        data: {
     
     
          message: "你好"
        }
      })
    </script>
  </body>
</html>

1.全局组件和局部组件的区别

全局组件可以在所有的Vue实例中使用
局部组件只能在当前注册组件的Vue实例中使用

2.怎么注册全局组件和局部组件

全局组件用Vue.component()注册，然后可以在所以的Vue实例中使用
局部组件在当前组件中使用components注册

上文代码中全局组件和局部组件同时使用。效果图如下：
在这里插入图片描述

父组件和子组件

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <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>
                <h2>我是标题1</h2>
                <p>我是内容111</p>
                <p>我是内容111</p>
            </div>`
      })

      // 2.创建第二个构造器(父组件)
      const cpnC2 = Vue.extend({
     
     
        template: `
            <div>
                <h2>我是标题2</h2>
                <p>我是内容222</p>
                <p>我是内容222</p>
                <cpn1></cpn1>
            </div>`,
        components: {
     
     
          cpn1: cpnC1
        }
      })

      // root组件(可以看作是一个组件))
      const app = new Vue({
     
     
        el: "#app",
        data: {
     
     
          message: "你好"
        },
        components: {
     
     
          cpn2: cpnC2
        }
      })
    </script>
  </body>
</html>

1.父组件和子组件的关系

调用者是父组件
被调用者是子组件

2.上文代码关系

<cpn1></cpn1>此刻没有在root里面注册，所有不能使用
Vue实例压根不知道有cpn1的存在，cpn2解析完成之后，才把整体交给vue实例
类似俄罗斯套娃

效果图如下：
在这里插入图片描述

组件模版的分离写法

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

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

    <!-- 1.通过script标签来定义template，但是类型必须是type="text/x-template" -->
    <script type="text/x-template" id="cpn">
      <div>
          <h2>我是通过script标签定义的</h2>
          <p>我是内容</p>
          <p>我是内容</p>
      </div>
    </script>

    <!-- 2.通过template标签即可，同样只要使用id绑定 -->
    <template id="cpn2">
      <div>
        <h2>我是通过template标签定义的</h2>
        <p>我是内容</p>
        <p>我是内容</p>
      </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
      // 1.注册全局组件
      Vue.component("cpn", {
     
      template: "#cpn" })
      Vue.component("cpn2", {
     
      template: "#cpn2" })

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

1.什么是模版分离

我酝酿了半个月好不容易想写几行代码，你还这么折磨我，不是我不想学，是老天不让我学…解决办法就是我们可以将模版template写到html里面去，而代码效果是这样的，好像是好看了一点。
在这里插入图片描述

2.怎么使用模版

每个组件都有一个template属性，只要绑定id即可如你所愿。

Vue.component("cpn", {
    
     template: "#cpn" })
Vue.component("cpn2", {
    
     template: "#cpn2" })

3.两种模版任你选择

通过script标签定义template
直接使用template标签

组件中的数据存放问题

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

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

    <!-- 组件不可以访问vue实例中的变量 -->
    <template id="cpn">
      <div>
        <h2>{
   
   {title}}</h2>
        <p>我是内容</p>
        <p>我是内容</p>
      </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
      // 1.注册一个全局组件
      Vue.component("cpn", {
     
     
        template: "#cpn",
        data() {
     
     
          return {
     
     
            title: "我是定义在组件中的"
          }
        }
      })

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

1.组件数据关系

子组件和父组件是两个单独的个体，父组件有自己的data变量，同样子组件也有自己的data变量，子组件的data变量放在和template同一级下面即可，注意子组件的变量父组件不可以直接使用，同理父组件的变量子组件也不可以直接使用。

Vue.component("cpn", {
    
    
  template: "#cpn",
  data() {
    
    
    return {
    
    
      title: "我是定义在组件中的"
    }
  }
})

第一次记录自己的学习笔记，如果您发现问题，欢迎指点。