vue组件
一、组件
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己所需，使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。本文将详细介绍Vue组件基础用法
二、组件扩展
- 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
- 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
- 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
- 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
- data必须是一个函数，不再是一个对象。
三、组件的使用
组件的使用分成三个步骤：
- 创建组件构造器
- 注册组件
- 使用组件
四、组件分类
- 全局组件，全局组件—在所有的 vue 实例中都可以使用
- 局部组件，局部组件—只能在指定的 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 函数创建多个子节点
实现下面的效果：
- li-1
- li-2
- li-3
代码如下：
<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>
}
})
