锐客网

  1. 首页 > 睿知 > it技术 > >

#yyds干货盘点#快速理解Vue组件化开发，干货太多，”建议收藏细品“

IT知识组件化组件化开发vue组件化

【#yyds干货盘点#快速理解Vue组件化开发，干货太多，”建议收藏细品“】别裁伪体亲风雅，转益多师是汝师。这篇文章主要讲述#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,

    推荐阅读


    上一篇：4个优化方法，让你能了解join计算过程更透彻

    下一篇：YUM源的补充及三种方式的演示