今天讲vue系列专栏里的VUE组件

叶秋学长
81 阅读2分钟

​​携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第十九天，        <<点击查看活动详情 >>​​​​​​​ ​

博主传送门：  

   叶秋学长

博主简介：

全栈领域新星创作者，新星计划第三季人工智能赛道TOP2；阿里云技术博主；退役复学在校大学生，全栈JAVA领域创作者，目光所至，皆为华夏

系列专栏跳转：

Vue讲解

Spring系列

Spring Boot 系列

云原生系列（付费专栏）

今天****叶秋学长****带领大家继续学习vue讲解系列专栏的Vue组件~~


作者：叶秋学长
链接：juejin.cn/post/713044… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一、为什么需要组件?

一个页面逻辑很多,放在一起不利于管理,不利于开发,将一个页面分割成小小的功能块

vue组件化

应用:任何应用都是一颗组件树

1.创建组件

  • const cpn = Vue.extend({}):创建一个组件构造器
  • template:表示我们组件的模板(其实就是你要显示的html)
  • Vue.component('组件名称',构造器cpn)
  • 使用:<组件名称></组件名称>

​编辑

2.创建组件语法糖写法

省去Vue.extend()的调用,可以直接使用一个对象代替

Vue.component("myCpn", {
    template: `
            <div>
            <h1>广告</h1>
            <h2>广告内容</h2>
            </div>
            `,
});

3.全局组件和局部组件

  • 全局组件

    全局注册,实现所有vue都可以使用

  • 局部组件

    挂载在某一个vue实例下,其他组件不可以用

4.父组件和子组件

简单理解,在谁的div里面去使用的组件,就是这个对应的子组件

<div id="app">
    <father-cpn></father-cpn>
</div>
<script>
    Vue.component("fatherCpn", {
    template: `
        <div>
           <h1>父组件</h1> 
           <son></son>
        </div>
            `,
    // 子组件(局部组件)
    components:{
        son:{
            template:`  <h1>子组件</h1>`
        }
    }
});
new Vue({
    el: "#app",
    data: {},
});

5.模板抽离写法

  • 方法一

    <!-- 方法一 -->
<script type="text-template" id="cpn1">
    <div>
    <h1>模板抽离方法一</h1>
    </div>
</script>

  • 方法二(推荐)

    <!-- 方法二 -->
<template id="cpn2">
<div>
    <div class="box">
        <h1>模板抽离方法二</h1>
    </div> 
</div>
</template>

6.组件数据

组件是一个单独功能模块分装

这个模块拥有自己html,data,methons....

data是一个函数

data(){
    retrun {
        
    }
}

7.父子组件通信

(1)父组件向子组件通信

子组件使用props接收父组件传递的参数

props:

  • 数组:数组值名称应该是对应的变量名
  • 对象(推荐):可以设置传入参数的类型,也可以设置默认

(2)子组件向父组件通信

写一个自定义方法

this.$emit("方法-名称",传递参数)

8.父子组件的访问方式

9.插槽

10.具名插槽

11.作用域插槽

​

avatar
文章
阅读
粉丝