博主传送门: 叶秋学长 博主简介: 全栈领域新星创作者,新星计划第三季人工智能赛道TOP2;阿里云技术博主;退役复学在校大学生,全栈JAVA领域创作者,目光所至,皆为华夏 系列专栏跳转: Vue讲解 Spring系列 Spring Boot 系列 云原生系列(付费专栏) 今天叶秋学长带领大家继续学习vue讲解系列专栏中的Vue组件~~
一个页面逻辑很多,放在一起不利于管理,不利于开发,将一个页面分割成小小的功能块
vue组件化
应用:任何应用都是一颗组件树
编辑
省去Vue.extend()的调用,可以直接使用一个对象代替
Vue.component("myCpn", {
template: `
<div>
<h1>广告</h1>
<h2>广告内容</h2>
</div>
`,
});
简单理解,在谁的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: {},
});
<!-- 方法一 -->
<script type="text-template" id="cpn1">
<div>
<h1>模板抽离方法一</h1>
</div>
</script>
<!-- 方法二 -->
<template id="cpn2">
<div>
<div class="box">
<h1>模板抽离方法二</h1>
</div>
</div>
</template>
组件是一个单独功能模块分装
这个模块拥有自己html,data,methons....
data是一个函数
data(){
retrun {
}
}
(1)父组件向子组件通信
子组件使用props接收父组件传递的参数
props:
(2)子组件向父组件通信
写一个自定义方法
this.$emit("方法-名称",传递参数)
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。