#yyds干货盘点#快速理解Vue组件化开发，干货太多，”建议收藏细品“
Posted 前端老实人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点#快速理解Vue组件化开发，干货太多，”建议收藏细品“相关的知识，希望对你有一定的参考价值。
组件化开发
组件模块的分离
<div id="app">
<cpn></cpn>
</div>
<!-- 第1个方法.script标签类型必须是type="text/x-template" -->
<!-- <script type="text/x-template" id="cpn"> -->
<!-- 组件写这里更方便 -->
<!-- <div>
<h2>标题</h2>
<p>内容</p>
</div>
</script> -->
<!-- 第2个方法.template标签 -->
<template id="cpn">
<div>
<h2>标题</h2>
<p>内容</p>
</div>
</template>
<script>
// 注册一个component全局组件的语法糖更方便,不用创建组件构造器
Vue.component(cpn,
template: #cpn
)
const app = new Vue(
el: #app,
data: ,
methods:
);
</script
组件中的data为什么是函数
<script>
// 1.注册组件
Vue.component(cpn,
template:#cpn,
// data()必须是个函数,不是函数也会报错,
//data:这样多个调用都指向一个内存地址一个变一起变,
// data()这样每次调用就会有一个新的内存地址,自己改自己的内存东西
// 每一个组件实例都有自己的状态,他都需要一个对象来保存属于自己的状态
data()
return
counter:0
,
methods:
increment()
this.counter++
,
decrement()
this.counter--
)
</script
组件通信父传子props
<div id="app">
<!-- <cpn v-bind:cmovies="movies" :cmessage="message"></cpn> -->
<!-- 这里只负责赋值了,没有输出 -->
<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
</div>
<!-- 组件模板 -->
<template id="cpn">
<!-- 内部代码多必须有个根标签包裹,比如这个div -->
<div>
<ul>
<li v-for="item in cmovies">item</li>
</ul>
<h2>cmessage</h2>
</div>
</template>
<script>
//父传子props
const cpn =
template: #cpn,
// 一。数组方式
// props:[cmovies,cmessage],
// 二。对象方式
props:
// 1.类型限制
// cmovies:Array,
// cmessage:String,
// 2.给字符串提供一些默认值
cmessage:
// 类型
type: String,
// default当别人没传值的默认值
default: aaaaa,
// required必须传值
required:true
,
// 给数组设置
// 类型是对象或数组时，默认值default必须是一个函数
cmovies:
type:Array,
#yyds干货盘点#Vue-transition组件的Css动画+过渡，笔记总结基于Pinpoint对SpringCloud微服务项目实现全链路监控 #yyds干货盘点#
快速入门vue，含实战案例，“建议收藏”，用到省的百度了#yyds干货盘点#