运维开发网

vue全球组件和本地组件介绍

运维开发网 https://www.qedev.com 2022-04-27 15:30 出处:网络
这篇文章主要介绍了vue全局组件和局部组件的写法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

这篇文章主要介绍了vue全局组件和局部组件的写法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教


全局组件和局部组件写法

vue组件有两种,一种是全局组件,一种是局部组件。整个项目往往以全局的方式编写,针对特定页面使用的本地组件较少。


全局组件引入写法

在项目的main.js中:

import Vue from 'vue';import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件?Vue.use(MyComponent); // 自定义全局组件的时候需要Vue.use();Vue.component('my-component', MyComponent); //初始化组件?new Vue({? el: '#app',? router,? components: {? ? App,? ? MyComponent? },? template: 'lt;App/gt;',});?


局部组件引入写法

在需要使用组件的a.vue文件中:

lt;templategt;lt;/templategt;?lt;scriptgt;import MyComponent from '@/components/MyComponent.vue';export default {? components: {MyComponent}, // 直接初始化就可以啦,不需要Vue.use();? data() {},? methods: {}};lt;/scriptgt;?lt;style lang="scss" scopedgt;lt;/stylegt;?

下面附上自定义组件MyComponent.vue的文件代码:

lt;templategt;? lt;divgt;? ? lt;a @click="methods1()"gt;lt;/agt;? lt;/divgt;lt;/templategt;lt;scriptgt;import { MessageBox } from 'mint-ui';export default {? data () { // 组件内参数定义在data中? ? return {? ? ? data1: {}? ? };? },? props: { // 组件传参使用props? ? value1: String,? ? value2: Number? },? methods: { // 组件的计算方法? ? methods1 () {? ? }? }};lt;/scriptgt;lt;style lang="scss" scopedgt;lt;/stylegt;


vue全局/局部组件lt;!DOCTYPE htmlgt;lt;htmlgt;lt;headgt;lt;meta charset="UTF-8"gt;lt;titlegt;lt;/titlegt;lt;script src="js/vue.js"gt;lt;/scriptgt;lt;/headgt;lt;bodygt;lt;!-- 全局组件简写--gt; lt;div id="example1"gt;lt;my-compoentgt;lt;/my-compoentgt;lt;/divgt;lt;scriptgt;Vue.component('my-compoent',{template:'lt;divgt;测试1lt;/divgt;'})new Vue({el:'#example1'})lt;/scriptgt;lt;!-- 注册全局组件--gt;lt;div id="example2"gt;lt;my-compoent1gt;lt;/my-compoent1gt;lt;/divgt;lt;scriptgt;//创建一个组件构造器var myComponent = Vue.extend({template:'lt;divgt; 测试2lt;/divgt;'})//注册全局组件: (z组件名称 组件构造器)//Vue.component(tagName,options)Vue.component('my-compoent1',myComponent)new Vue({el:'#example2'})lt;/scriptgt;lt;!-- 注册局部组件--gt;lt;div id="example3"gt;lt;my-compoentgt;lt;/my-compoentgt;lt;/divgt;lt;div id="example4"gt;lt;my-compoentgt;lt;/my-compoentgt;lt;/divgt;lt;scriptgt;//创建一个组件构造器var myComponent = Vue.extend({template:'lt;divgt; 局部组件4lt;/divgt;'})//注册组件 并指定组件的标签 逐渐的html标签为 my-compoentVue.component('my-compoent',myComponent)new Vue({el:'#example4',components:{'my-component':myComponent}})lt;/scriptgt;lt;!-- 父子组件 数据传递父子组件的关系:通常组件A在它的模板中使用组件B,此时组件A为父组件,组件B为子组件。父子组件应该解耦,组件实例的作用域是孤立的,子组件中不能直接使用父组件的数据。应该使用props传递父组件到子组件的数据,子组件通过events给父组件发消息,以此实现父子组件间的通信。 如上,在其他组件内部用components声明组件,即为局部注册。在Vue实例中用components注册组件时,可以理解为Vue实例为一个大的父组件,其他任何注册的组件都是子组件。所以在注册组件时,如果要使用Vue实例data中的数据,都要用props传递Vue实例中的数据,让Vue实例的数据在组件中可用。 还可以用v-bind动态绑定props的值到父组件的数据,父组件数据发生变化时,子组件的数据也相应的变化。父--》子:父组件通过props传递父组件到子组件子--》父:子组件通过events给父组件发消息--gt;lt;div id="test"gt; lt;template id="testProp"gt; lt;ulgt; lt;li v-for="book in books"gt; lt;pgt;{{book.title}}lt;/pgt; lt;pgt;{{book.desc}}lt;/pgt; lt;pgt;{{book.author}}lt;/pgt; lt;/ligt; lt;/ulgt; lt;templategt; lt;test-prop :book-list = "books"gt;lt;/test-propgt;lt;/divgt;lt;scriptgt;var TestProp = Vue.extend({ template:'#testProp', props: ['book-list']});var test = new Vue({ el: '#test', data: function(){ return { books: [ { title: 'title1', desc: 'desc1', author: 'author1' }, { title: 'title2', desc: 'desc2', author: 'author2' }, { title: 'title3', desc: 'desc3', author: 'author3' }, ], } }, components:{ 'test-prop': TestProp, },});lt;/scriptgt;lt;/bodygt;lt;/htmlgt;

以上个人经验,希望能给你一个参考,也希望你能支持一下搜源网。


0

精彩评论

暂无评论...
验证码 换一张
取 消