这篇文章将为大家详细讲解有关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: '<h2>全局组件</h2>' }); 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: '<h2>局部组件</h2>' } } }); </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: '<h2 v-on:click="changeCount">{{count}}</h2>', 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: '<h2>app应用</h2>' // }); //使用继承实现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> <h2>{{message}}</h2> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> </template> <!-- 父组件向子组件传递数据的模版 --> <template id="temp-2"> <div> <h2>{{message}}</h2> <ul> <li v-for="item in list">{{item}}</li> </ul> <my-nav :itemlist = "list"></my-nav> </div> </template> <!-- 子组件向子组件传递数据的模版 --> <template id="temp-3"> <div> <h2>{{message}}</h2> <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> <h2>{{message}}</h2> <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> <h2>{{message}}</h2> <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: `<h2>{{message}}</h2>`, 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> <h2>我是标题</h2> </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: `<h2>我是标题</h2>`, } } }); </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: `<h2>我是标题</h2>`, } } }); </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: `<h2>我是标题</h2>`, } } }); </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> <h2>{{message}}</h2> <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组件的使用方法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。