今天讲vue讲解专栏里的VUE组件
作者是名退役复学在校大学生，对jdk、spring、springboot、springcloud、mybatis等开源框架源码有一定研究，欢迎关注，和我一起交流。
一、为什么需要组件?
一个页面逻辑很多,放在一起不利于管理,不利于开发,将一个页面分割成小小的功能块
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.作用域插槽
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-07-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
