如果将页面拆分成一个个小的功能块,每个功能块实现自己的内容,之后对页面的管理和维护就变得很容易了。
1.创建组件构造器
2.注册组件
3.使用组件
//创建组件构造器对象 const cpnc = vue.extend({ template:` <div> <h2>hello world</h2> <p>hi world</p> </div> ` }) //注册组件 vue.component('my-cpn',cpnc) //使用组件 <div id="app"> <my-cpn></my-cpn> </div>
可以在多个vue的实例下使用
vue.component('my-cpn',cpnc)
仅可以在当前vue实例下使用
var vm = new vue({ el: '#app', data: {}, methods: {}, components:{ mycpn: cpnc } });
<script> const cpnc1 = vue.extend({ template:` <div> <h2>我是标题</h2> <p>我是内容,哈哈</p> </div> ` }) const cpnc2 = vue.extend({ template:` <div> <h2>我是标题2</h2> <p>我是内容2,呵呵呵</p> <cpn1></cpn1> </div> `, components:{ cpn1:cpnc1 } }) var vm = new vue({ el: '#app', data: {}, methods: {}, components:{ cpn2: cpnc2 } }); </script>
vue.component('cpn1',{ template:` <div> <h2>我是标题</h2> <p>我是内容,呵呵呵</p> </div> ` })
var vm = new vue({ el: '#app', data: {}, methods: {}, components:{ 'cpn2' :{ template:` <div> <h2>我是标题2</h2> <p>我是内容2,呵呵呵</p> </div> ` } } });
type="text/x-template"
<script type="text/x-template" id="cpn"> <div> <h2>哈哈哈哈哈</h2> <p>歪比歪比</p> </div> </script> <script> vue.component('cpn',{ template: '#cpn' }) var vm = new vue({ el: '#app', data: {}, methods: {} }); </script>
<template id='cpn'> <div> <h2>哈哈哈哈哈</h2> <p>歪比歪比</p> </div> </template> <script> vue.component('cpn',{ template: '#cpn' }) var vm = new vue({ el: '#app', data: {}, methods: {} }); </script>
不能,而且即使可以访问,如果将所有数据都放在vue实例中,vue实例会变得非常臃肿
<template id='cpn'> <div> <h2>{{title}}</h2> <p>歪比歪比</p> </div> </template> <script> vue.component('cpn',{ template: '#cpn', data(){ return { title: 'abc' } } }) var vm = new vue({ el: '#app', data: {}, methods: {} }); </script>
data(){}
如对本文有疑问, 点击进行留言回复!!
JavaScript 好题汇总分享(持续更新,看到好题就写)
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论