组件
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。根据项目需求,抽象出一些组件,每个组件里包含了展现、功能和样式。每个页面,根据自己所需,使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦。本文将详细介绍Vue组件基础用法
组件扩展
组件的使用
组件的使用分成三个步骤:
组件分类:
定义全局组件:
到目前为止,我们只用过 Vue.component来创建组件,全局组件注册方式:Vue.component(组件名,{方法})
<div id="app"> <!--使用定义好的全局组件--> <counter></counter> </div> <script src="./vue.js"></script> <script type="text/javascript"> // 注册组件,定义全局组件,两个参数:1,组件名称。2,组件参数 Vue.component("counter",{ template:‘<button v-on:click="count++">你点了{{ count }} 次.</button>‘, data(){ return { count:0 } } }) var app = new Vue({ el:"#app" }) </script>
定义局部组件:
局部组件注册方式,直接在Vue实例里面注册
<body> <div id="app"> <child-component></child-component> </div> <script> new Vue({ el: "#app", components:{ "child-component":{ template:"<h1>我是局部组件</h1>" } } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--3.使用组件--> <my-tem></my-tem> <my-tem></my-tem> <div> <div id="tem"> <my-tem></my-tem> </div> </div> </div> <my-tem></my-tem> <script src="../js/vue.js"></script> <script> // 1.创建组件构造器对象 const temC = Vue.extend({ template: ` <div> <h2>组件</h2> <p>组件内容</p> </div>` }) // 2.注册组件 Vue.component(‘my-tem‘, temC) const app = new Vue({ el: ‘#app‘, data: { message: ‘组件内容‘ } }) </script> </body> </html>
<div id="app"> <!--使用定义好的全局组件--> <counter></counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> // 定义全局组件,两个参数:1,组件名称。2,组件参数 Vue.component("counter",{ template:‘<button v-on:click="count++">你点了{{ count }} 次.</button>‘, data(){ return { count:0 } } }) var app = new Vue({ el:"#app" }) </script>
Vue.component("my-content", { data: function () { return { label: "组件", content: "组件内容" } }, template: ` <div> <button>{{ label }}</button> <span>{{ content }}</span> </div> ` });
内联模版(inline-template)
<my-label inline-template> <span>{{label}}</span> </my-label> Vue.component(‘my-label‘, { data: function () { return { label: "hello" } } })
X-template
定义一个 <script> 标签,标记 text/x-template类型,通过 id 链接。
<script type="text/x-template" id="label-template"> <span>{{label}}</span> </script> Vue.component(‘my-label‘, { template: "#label-template", data: function () { return { label: "test" } } })
//tem.vue <template> <div> <h1>我是标题一</h1> </div> </template> <script> export default { data() { return {} } } </script>
7.渲染函数创建节点方式(实现效果和方法6一模一样)
//ren.vue <script> export default { render: function(createElement) { return createElement(‘h1‘, ‘我是标题一‘) } } </script>
render总共接收三个参数,第一个参数为标签名(‘ul‘),第二个参数为数据对象,第三个参数为子节点(我是标题一),要么文本要么是存储着一个或一个以上的子节点数组.
render 函数创建多个子节点
实现下面的效果:
代码如下:
<script> export default { render: function(createElement) { return createElement(‘ul‘, [ createElement(‘li‘, ‘li-1‘), createElement(‘li‘, ‘li-2‘), createElement(‘li‘, ‘li-3‘) ]) } } </script>
简化后:
<script> export default { data() { return { list: [‘li-1‘, ‘li-2‘, ‘li-3‘] } }, render: function(createElement) { return createElement( ‘ul‘, this.list.map(_ => { return createElement(‘li‘, _) }) ) } } </script>
8.
Vue.component(‘my-label‘, { data: function () { return { label: ["活动结束"] } }, render(){ return <div>{this.label}</div> } })
原文:https://www.cnblogs.com/konglxblog/p/14835191.html