VUE组件化开发（一）

最新推荐文章于 2024-07-16 15:41:21 发布

UltimateGalaxy

最新推荐文章于 2024-07-16 15:41:21 发布

阅读量160

点赞数

分类专栏：前端技术文章标签： vue

本文链接：https://blog.csdn.net/qq_43618583/article/details/113127961

版权

前端技术专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、注册组件的基本步骤

组件的使用分成三个步骤：
1、创建组件构造器
调用Vue.extend()创建组件构造器
2、注册组件
调用Vue.component注册组件
3、使用组件
在Vue实例的作用范围内使用组件

例：

<body>
    <div id="app">
        <!--使用组件-->
        <my-cpn></my-cpn>
    </div>
</body>     
    <script>
        // 1.调用Vue.extend()创建组件构造器，本代码组件构造器对象取名为cpnC
        const cpnC = Vue.extend({
        //template指的是自定义模板
            template: `
                <div>
                    <h2>我是标题</h2>
                    <p>我是内容</p>
                    <p>我是内容</p>
                </div>`
        })

        // 2.调用Vue.component（组件标签名，组件构造器）注册组件。'my-cpn'为组件的标签名，意味着引用的时候就要以<my-cpn></my-cpn>的形式
        Vue.component('my-cpn', cpnC)

        const app = new Vue({
          el: '#app',         
          data: {
            
            } 

        })
    </script>

二、全局组件

全局组件可以在多个Vue实例下使用，如上面的代码所示。

三、局部组件

在某个Vue实例中注册的组件，就是局部组件。以下代码组件是在app中注册的，所以只能在对应id处显示。
例：

<body>
    <div id="app">
        <!--使用组件-->
        <my-cpn></my-cpn>
        <!--<cpn>为局部组件，旨在app中声明，故可显示-->
        <cpn></cpn>
    </div>
    <div id="app2"> 
        <!--局部组件在app2中未声明，故不可显示-->>
        <cpn></cpn>
    </div>
</body>     
    <script>
        // 1.调用Vue.extend()创建组件构造器，本代码组件构造器对象取名为cpnC
        const cpnC = Vue.extend({
            template: `
                <div>
                    <h2>我是标题</h2>
                    <p>我是内容, 哈哈哈哈</p>
                    <p>我是内容, 呵呵呵呵</p>
                </div>`
        })

        // 2.调用Vue.component（组件标签名，组件构造器）注册组件（注：此事为全局组件）。'my-cpn'为组件的标签名，意味着引用的时候就要以<my-cpn></my-cpn>的形式
        Vue.component('my-cpn', cpnC)

        const app = new Vue({
            el: '#app',
            data:{

            },
            //局部组件
            components:{
                // cpn:使用组件时的标签名,cpnC:组件构造器。key：value
                cpn: cpnC
            }        
        })

        const app2 = new Vue({
            el: '#app2'
        })
    </script>

四、父组件&子组件

例：

<div id="app">
  <cpn2></cpn2>
  <!--<cpn1></cpn1>若是这里调用子标签，会报错。若想在Vue实例对应app这个作用域使用这个组件，1.要么在全局注册过了.2要么在Vue的component里面注册过了。若想使用，需要在根组件components里面注册一次-->
</div>

<script src="../js/vue.js"></script>
<script>
  // 1.创建第一个组件构造器(子组件)
  const cpnC1 = Vue.extend({
    template: `
      <div>
        <h2>我是标题1</h2>
        <p>我是内容, 哈哈哈哈</p>
      </div>
    `
  })


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

  // root组件（根组件）
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn2: cpnC2
    }
  })
</script>

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

1.全局组件注册的语法糖

例：原本写法：

  // 1.全局组件注册的语法糖
  //  1.创建组件构造器
    const cpn1 = Vue.extend({
    	template: `
	      <div>
	        <h2>我是标题1</h2>
	        <p>我是内容</p>
	      </div>
    `
    })

  //  2.注册组件
  Vue.component('cpn1', cpn1)

语法糖写法：

// 1.全局组件注册的语法糖
  // 1.创建组件构造器
  // const cpn1 = Vue.extend()

  // 2.注册组件
  Vue.component('cpn1', {
    template: `
      <div>
        <h2>我是标题1</h2>
        <p>我是内容</p>
      </div>
    `
  })

2.局部组件注册的语法糖

例：

const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      'cpn2': {
        template: `
          <div>
            <h2>我是标题2</h2>
            <p>我是内容</p>
          </div>
    `
      }
    }
  })

六、组件模板抽离写法

写法一：

<script type="text/x-template" id="cpn">
	<div>
  	  <h2>我是标题</h2>
  	  <p>我是内容</p>
	</div>
</script>

对应的script标签内要能与上述代码产生联系——用id进行联系：

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

写法二：用template标签

<template id="cpn">
  <div>
    <h2>我是标题</h2>
    <p>我是内容</p>
  </div>
</template>

七、组件

1.组件内部不能访问VUE实例里面的数据

2.组件数据存放：
组件对象也有一个data属性，只是这个data属性必须是一个函数，而且这个函数返回一个对象，对象内部保存着数据。
如下所示：

Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        title: 'title'
      }
    }
  })

八、父子组件通信

法一：通过props向子组件传递数据
在这里插入图片描述
自定义类型：

props中的驼峰标识：
childrenMyMessage——>children-my-message

法二：通过事件向父组件发送消息

使用自定义事件。

自定义事件流程：
在子组件中，通过$emit()来触发事件。
在父组件中，通过v-on来监听子组件事件。

UltimateGalaxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE组件化开发（一）

一、注册组件的基本步骤组件的使用分成三个步骤：1、创建组件构造器调用Vue.extend()创建组件构造器2、注册组件调用Vue.component注册组件3、使用组件在Vue实例的作用范围内使用组件例：<body> <div id="app">  <my-cpn></my-cpn> </div></body> &lt
复制链接

扫一扫

专栏目录