Vue 1.2 组件化开发未完成

最新推荐文章于 2022-08-07 23:34:46 发布

BF-LoneSilverWind

最新推荐文章于 2022-08-07 23:34:46 发布

阅读量254

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/digua930126/article/details/119887986

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

组件化开发

注册组件的基本步骤

1.创建组件构造器

Vue.extend()

调用Vue.extend()创建的是一个组件构造器。 
通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。
这种写法在Vue2.x的文档中几乎看不到了，它会使用语法糖，但是在很多资料中还是会提到这种方式。

2.注册组件

Vue.component()

调用Vue.component()是将组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

3.使用组件

根据标签名使用标签

使用示例:

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

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div id="app">
    <!-- 3. 使用组件 -->
    <gy></gy>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    // 1. 创建组件构造器对象
    const gytem = Vue.extend({
      template:`
      <div>
        <h2>标题</h2>
        <p>内容</p>
      </div>`
    })

    // 2. 注册组件(全局组件)
    Vue.component('gy', gytem)

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

</html>

全局组件和局部组件

描述

注册全局组件和局部组件的步骤大致相同
创建组件构造器 → 注册组件 → 使用组件

全局组件
注册组件的位置在全局即是全局组件
可在任意Vue示例下使用

局部组件
注册组件的位置在Vue实例对象的components内即是局部组件
只能在单个Vue实例下使用

示例:

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

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div id="app">
    <!-- 3. 使用组件 -->
    <gy></gy>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    // 1. 创建组件构造器对象
    const gytem = Vue.extend({
      template:`
      <div>
        <h2>标题</h2>
        <p>内容</p>
      </div>`
    })

    // 2. 注册全局组件
    // Vue.component('gy', gytem)

    const app = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // 2.注册局部组件
      components: {
        gy: gytem
      }
    })
  </script>
</body>

</html>

父组件和子组件

描述:

即是两个组件我们在父组件中注册子组件
我们可以在父组件的template模板中使用子组件
如果要在其他位置使用子组件需要在对应的实例中注册组件

示例:

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

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div id="app">
    <!-- 使用组件 -->
    <c2></c2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    // 创建子组件
    const cpn1 = Vue.extend({
      template: `
      <div>
        <p>子组件</p>
      </div>`
    })

    // 创建父组件
    const cpn2 = Vue.extend({
      template: `
      <div>
        <p>父组件</p>
        <c1></c1>
      </div>`,
      components: {
        // 在父组件中注册子组件
        c1 : cpn1
      }
    })

    // Vue 实例 root组件
    const app = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        // 在Vue实例中注册父组件
        c2 : cpn2
      }
    })
  </script>
</body>

</html>

组件语法糖

即是将创建组件合并到注册组件步骤中

示例:

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

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div id="app">
    <c1></c1>
    <c2></c2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    Vue.component('c1', {
      template: `
      <div>
        <h2>全局组件语法糖</h2>
      </div>`
    })

    const app = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        c2: {
          template: `
        <div>
          <h2>局部组件语法糖</h2>
        </div>`
        }
      }
    })
  </script>
</body>

</html>

template 模板分离

示例:

1.<script>标签

2.<template>标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

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

  <!-- 1.script标签, 注意:类型必须是text/x-template -->
  <!-- <script type="text/x-template" id="cpn">
    <div>
      <p>内容</p>
    </div>
  </script> -->

  <!-- 2.template标签 -->
  <template id="cpn">
    <div>
      <p>内容</p>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    // 全局组件
    Vue.component('cpn', {
      template: '#cpn'
    })

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

</html>

组件数据存放

我们在使用组件属性时会将属性存放在对应组件的data中
如果放在root组件中会造成数据冗余,而且也不能获取到属性值
只是这个data属性必须是一个函数
而且这个函数返回一个对象，对象内部保存着数据

示例:

<script>
Vue.component('cpn', {
    template: '#cpn',
    // *************
    data() {
      return {
        title: 'abc'
      }
    }
    // *************
  })
</script>

组件中的data返回函数

设计时就要求返回函数不然会报错
因为组件是需要复用的,因此这里要返回函数使每个复用的组件中使用的属性值都是独立的对象,不让他们互相干扰。

BF-LoneSilverWind

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 1.2 组件化开发未完成

组件化开发注册组件的基本步骤1.创建组件构造器    Vue.extend()调用Vue.extend()创建的是一个组件构造器。通常在创建组件构造器时，传入template代表我们自定义组件的模板。该模板就是在使用到组件的地方，要显示的HTML代码。这种写法在Vue2.x的文档中几乎看不到了，它会使用语法糖，但是在很多资料中还是会提到这种方式。2.注册组件    Vue.component()调用Vue
复制链接

扫一扫