本篇文章给大家带来的内容是介绍vue组件是什么？vue组件如何使用？（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
组件的介绍
组件系统是将一个大型的界面切分成一个一个更小的可控单元。
组件是可复用的，可维护的。
组件具有强大的封装性，易于使用。
大型应用中，组件与组件之间交互是可以解耦操作的。
vue组件的使用
全局组件的使用
<!doctype html><html><head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body> <div id="app"> <my-header></my-header> </div> <script> //全局组建的定义 vue.component(my-header, { template: '<h1>全局组件</h1>' }); var app = new vue({ el: '#app', }); </script></body></html>
局部组件的使用
<!doctype html><html><head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body> <div id="app"> <my-header></my-header> </div> <script> //局部组件定义 var app = new vue({ el: '#app', components: { 'my-header': { template: '<h1>局部组件</h1>' } } }); </script></body></html>
组件数据的特点
<!doctype html><html><head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body> <div id="app"> <my-header></my-header> <my-header></my-header> <br> <my-header1></my-header1> <my-header1></my-header1> </div> <script> //组件数据之间不共享，vue实例中的数据也不能共享给组件,并且组件中的data只能使用函数 //组件的数据data使用函数的特点是每次点击或操作组件函数会重新执行，这样就不会影响其它组件，通过下面两个例子可以看出 var data = { count: 0 }; var app = new vue({ el: '#app', data: { message: hello vue!!! }, components: { 'my-header': { template: '<h1 v-on:click="changecount">{{count}}</h1>', data: function() { return data; }, methods: { changecount: function() { this.count++; } } }, 'my-header1': { template: '<div v-on:click="changecount1">{{count}}</div>', data: function() { return { count: 0 }; }, methods: { changecount1: function() { this.count++; } } } } }); </script></body></html>
vue实例与组件之间的关系
vue组件其实是一个可扩展的vue实例。
<!doctype html><html><head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body> <div id="app"> {{message}} </div> <script> //vue组件其实是一个可扩展的vue实例，vue实例也可以看成是一个组件 // var app = new vue({ // el: '#app', // template: '<h1>app应用</h1>' // }); //使用继承实现vue组件 var mycomponent = vue.extend({ data: function() { return { message: hello vue@@@ } } }); var vm = new mycomponent({ el: '#app' }); </script></body></html>
vue组件的模版方式
\
`
<template id="xxx"></template>
<script type="text/x-template"></script>
.vue 单文件
<!doctype html><html><head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body> <div id="app"> <my-header></my-header> <my-header-1></my-header-1> <my-header-2></my-header-2> <my-header-3></my-header-3> </div> <template id="temp"> <div> <p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </p> </div> </template> <script type="text/x-template" id="temp1"> <div> <p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </p> </div> </script> <script> //vue模版添加方式 var app = new vue({ el: '#app', components: { 'my-header': { template: '<div>\ <p>\ <ul>\ <li>1</li>\ <li>2</li>\ <li>3</li>\ </ul>\ </p>\ </div>', data: function() { return { message: 第一项 } } }, 'my-header-1': { template: `<div> <p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </p> </div>`, }, 'my-header-2': { template: '#temp' }, 'my-header-3': { template: '#temp1' } } }); </script></body></html>
vue父组件向子组件通信（props）
<!doctype html><html><head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body> <div id="app"> <!-- 数据在组件中 --> <my-header></my-header> <!-- 父组件向子组件传递数据 --> <my-header-1 :list="temp_2_list"></my-header-1> <!-- 父组件向子组件传递数据不给值 --> <my-header-1></my-header-1> </div> <!-- 数据在组件中的模版 --> <template id="temp-1"> <div> <h1>{{message}}</h1> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> </template> <!-- 父组件向子组件传递数据的模版 --> <template id="temp-2"> <div> <h1>{{message}}</h1> <ul> <li v-for="item in list">{{item}}</li> </ul> <my-nav :itemlist = "list"></my-nav> </div> </template> <!-- 子组件向子组件传递数据的模版 --> <template id="temp-3"> <div> <h1>{{message}}</h1> <ul> <li v-for="item in itemlist">{{item}}</li> </ul> </div> </template> <script> var vm = new vue({ el: '#app', data: { temp_2_list: [1, 2, 3] }, components: { //数据在自己组件中的实例 'my-header': { template: '#temp-1', data: function() { return { list: [1, 2, 3], message: 组件中的数据 }; } }, //父组件向子组件传递数据 'my-header-1': { //props: [list], template: '#temp-2', data: function() { return { message: 父组件向子组件传递数据 }; }, //属性的验证与默认值 props: { list: { type: array, default: [4, 5, 6] } }, //子组件的子组件 components: { 'my-nav': { template: '#temp-3', data: function() { return { message: 子组件中的子组件 }; }, props: [itemlist] } } } } }); </script></body></html>
子组件向父组件通信（emitevents）
<!doctype html><html><head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body> <div id="app"> <my-header-1 :list="temp_2_list"></my-header-1> </div> <!-- 父组件向子组件传递数据的模版 --> <template id="temp-2"> <div> <h1>{{message}}</h1> <ul> <li v-for="item in list">{{item}}</li> </ul> <my-nav :itemlist = "list" v-on:change-events="getchildcontent"></my-nav> </div></template> <!-- 子组件向子组件传递数据的模版 --> <template id="temp-3"> <div> <h1>{{message}}</h1> <ul> <li v-for="item in itemlist" v-on:click="getcontent">{{item}}</li> </ul> </div></template> <script> //子组件向父组件传递数据，是发布订阅模式 var vm = new vue({ el: '#app', data: { temp_2_list: [1, 2, 3] }, components: { //父组件向子组件传递数据 'my-header-1': { //props: [list], template: '#temp-2', data: function() { return { message: 父组件向子组件传递数据 }; }, //属性的验证与默认值 props: { list: { type: array, default: [4, 5, 6] } }, methods: { getchildcontent: function(str) { debugger alert(str); } }, //子组件的子组件 components: { 'my-nav': { template: '#temp-3', data: function() { return { message: 子组件中的子组件 }; }, props: [itemlist], methods: { getcontent: function(ev) { // console.log(this); // console.log(ev.target.innerhtml); this.$emit(change-events, ev.target.innerhtml); } } } } } } }); </script></body></html>
vue非父子组件的通信
空实例与自定义事件
$emit
$on
vuex状态管理
state
mutation
commit
空实例与自定义事件的使用(适用于小型项目)
<!doctype html><html><head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> ul { list-style-type: none; } </style></head><body> <div id="app"> <my-header-1></my-header-1> <my-header-2></my-header-2> </div> <script> //非父子组件通信 //1.0 使用空实例进行非父子组件通信 //定义空实例 //创建步骤是： //1、首先定义一个空实例 //2、需要给被传递数据的a组件使用$emit绑定自定义事件，并将a组件的数据发布给b组件 //3、使用$on订阅a组件发布过来的数据，从而获取数据 var busvm = new vue(); var vm = new vue({ el: '#app', components: { //组件b 'my-header-1': { template: `<h1>{{message}}</h1>`, data: function() { return { message: 非父子组件通信 }; }, mounted() { //使用bind（this）修正this busvm.$on(changeenvents, function(param) { this.message = param; }.bind(this)); }, }, //组件a 'my-header-2': { template: `<ul><li @click="getcontent" v-for="item in list">{{item}}</li></ul>`, data: function() { return { list: [第一项, 第二项, 第三项] }; }, methods: { getcontent: function(ev) { busvm.$emit(changeenvents, ev.target.innerhtml); } } } } }); </script></body></html>
vuex状态管理
vue组件内容分发
单<slot>标签使用
<!doctype html><html><head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> ul { list-style-type: none; } </style></head><body> <div id="app"> <my-header-1> <h1>我是标题</h1> </my-header-1> <my-header-1> <my-header-2></my-header-2> </my-header-1> </div> <script> //单插槽<slot></slot> var vm = new vue({ el: '#app', components: { 'my-header-1': { template: `<div>我是头部:<slot></slot></div>`, }, 'my-header-2': { template: `<h1>我是标题</h1>`, } } }); </script></body></html>
多<slot>标签使用
<!doctype html><html><head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> ul { list-style-type: none; } </style></head><body> <div id="app"> <my-header-1> <button slot="left">←</button> <button slot="right">→</button> </my-header-1> </div> <script> //多插槽的使用，则使用name属性来指定要插入的位置 var vm = new vue({ el: '#app', components: { 'my-header-1': { template: `<div><slot name="left"></slot> 我是头部:<slot name="right"></slot></div>`, }, 'my-header-2': { template: `<h1>我是标题</h1>`, } } }); </script></body></html>
<slot>默认值
<!doctype html><html><head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> ul { list-style-type: none; } </style></head><body> <div id="app"> <my-header-1> <button slot="left">←</button> <button slot="right">→</button> </my-header-1> </div> <script> //多插槽的使用，则使用name属性来指定要插入的位置 var vm = new vue({ el: '#app', components: { 'my-header-1': { template: `<div><slot name="left"></slot> 我是头部:<slot name="right"><button slot="right">+</button></slot></div>`, }, 'my-header-2': { template: `<h1>我是标题</h1>`, } } }); </script></body></html>
vue组件开发流程
编写基础html和css
提取组件
数据传输
内容分发
添加事件和方法
vue中dom操作(使用$refs)
<!doctype html><html><head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body> <div id="app"> <my-header-1 :list="temp_2_list"></my-header-1> </div> <!-- 父组件向子组件传递数据的模版,ref特性用于dom操作，使用this.$refs.row获取添加特性的dom元素 --> <template id="temp-2"> <div> <h1>{{message}}</h1> <ul > <li v-for="item in list" v-on:click="updatestyle" style="color:blue" ref="row">{{item}}</li> </ul> </div> </template> <script> //子组件向父组件传递数据，是发布订阅模式 var vm = new vue({ el: '#app', data: { temp_2_list: [1, 2, 3] }, components: { //父组件向子组件传递数据 'my-header-1': { //props: [list], template: '#temp-2', data: function() { return { message: 父组件向子组件传递数据 }; }, //属性的验证与默认值 props: { list: { type: array, default: [4, 5, 6] } }, methods: { updatestyle: function(ev) { ev.target.style.color = 'red'; // this.$refs.row.style.color = 'red'; console.log(this.$refs.row); this.$refs.row.foreach(element => { console.log(element); element.style.color = 'red'; }); } } } } }); </script></body></html>
以上就是vue组件是什么？vue组件如何使用？（代码示例）的详细内容。