在vue组件中如何实现全局注册和局部注册

下面我就为大家分享一篇vue 组件 全局注册和局部注册的实现,具有很好的参考价值,希望对大家有所帮助。

全局注册,注册的组件需要在初始化根实例之前注册了组件;

局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用:

全局组件

js

立即学习“前端免费学习笔记(深入)”;

Vue.component('tab-title',{   props:['title'],   template:'

登录后复制{{title}}’ }) Vue.component(‘tab-content’,{   props:[‘content’],   template:’

{{content}}

‘ })

局部组件demo:

html

  

登录后复制       

   

    

js

立即学习“前端免费学习笔记(深入)”;

var app=new Vue({      el: '#app',     components: {       'tab-title': {        props:['info'],//接受父元素传递的参数        template:'

登录后复制{{info}}’//点击时传递通过$emit子元素传递给父元素调用 addactive方法(不能使用驼峰写法)        },       ‘tab-content’:{         props:[“content”],        template:’

{{content}}

‘       }     },     methods:{       switchActive:function(index){        for(var i=0;i

组件实例的作用域是孤立的。这意味着不能再子组件的模板内直接引用父组件的数据。要让子组件可以使用父组件的数据,我们需要通过子组件的props选项。

子组件要显式地用 props 选项声明它期待获得的数据

在模板中,要动态地绑定父组件的数据到字模板的props,与绑定到任何普通的HTMO特性相类似。就是使用 v-bind。每当父组件的数据变化时,该变化也会传递给子组件:

所有的vuejs组件都是被扩展的vue实例

每一个Vue实例都会代理这个实例的data属性对象里的所有的属性

所有的Vue实例本身保罗的属性和方法,都以$开头来区别,对应Vue.set

例如:

vm.$data

vm.$methods

vm.$watch

这个有利于和data属性对象的数据来区分

多有的指令都以v-xxx形式存在:

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Vue2.0 事件的广播与接收(观察者模式)

vue2.0安装style/css loader的方法

iview table高度动态设置方法

以上就是在vue组件中如何实现全局注册和局部注册的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2750430.html

(0)
上一篇 2025年3月8日 05:35:55
下一篇 2025年3月8日 05:36:02

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 在vue中如何实现自定义全局方法

    下面我就为大家介绍一下vue 自定义全局方法,在组件里面的使用。具有很好的参考价值,希望对大家有所帮助。 在main.js里进行全局注册 Vue.prototype.funcName = function (){} 登录后复制 在所有组件里…

    编程技术 2025年3月8日
    200
  • 在vue组件传递对象中实现单向绑定,该怎么做?

    下面我就为大家分享一篇vue组件传递对象中实现单向绑定的示例,具有很好的参考价值,希望对大家有所帮助。 当使用vue组件时,组件之间经常需要传递数据,这里不讨论传递一个字符串变量或者数字变量的情况,那些去看官方文档就够了,此处提出我在组件间…

    编程技术 2025年3月8日
    200
  • 在Vue中如何操作自定义指令实现checkbox全选功能

    下面我就为大家分享一篇vue自定义指令实现checkbox全选功能的方法,具有很好的参考价值,希望对大家有所帮助。 最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做…

    编程技术 2025年3月8日
    200
  • 在vue中如何使用全局提示框组件?

    这篇文章主要介绍了vue的全局提示框组件实例代码,需要的朋友可以参考下 这篇文章给大家介绍一个vue全局提示框组件,具体代码如下所示:            {{message}}   export default { data() { r…

    编程技术 2025年3月8日
    200
  • 使用JS怎样实现最简单的跨域

    这次给大家带来使用JS怎样实现最简单的跨域,使用JS实现最简单的跨域注意事项有哪些,下面就是实战案例,一起来看一下。 有一天有人跑来跟我定方案,问我cors是什么原理,一脸懵逼,跨域我只知道jsonP啊,眼看一个装逼的机会就要失去了。“我现…

    编程技术 2025年3月8日
    200
  • 如何使用element-ui表格实现单元格可编辑

    下面我就为大家分享一篇element-ui 表格实现单元格可编辑的示例,具有很好的参考价值,希望对大家有所帮助。 如下所示:       {{ scope.row.name }}              export default{ d…

    编程技术 2025年3月8日
    200
  • vue中dialog弹框如何实现

    下面我就为大家分享一篇vue中简单弹框dialog的实现方法,具有很好的参考价值,希望对大家有所帮助。 效果如下,dialog中内容自行添加            x   empty       登录后复制 接收父组件传参isShow,并返…

    2025年3月8日
    200
  • 在Vue中如何控制全局console.log开关

    这篇文章主要给大家介绍了关于vue根据url传参如何控制全局console.log开关的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 前言 最近在学习vue,发现了一个…

    编程技术 2025年3月8日
    200
  • CodeSmith生成实体类是如何实现的

    本篇文章给大家带来的内容是关于codesmith生成实体类是如何实现的,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 /**本代码由代码生成器自动生成,请不要更改此文件的任何代码。*生成时间:*生成者:*/using Sy…

    编程技术 2025年3月8日
    200
  • 使用JavaScript实现无限滚动功能

    随着移动互联网和web应用程序的发展,用户的体验变得越来越重要。在设计和开发web页面时,一个关键因素是我们如何处理长列表和大量内容。传统的方式是使用分页,但随着javascript和ajax的出现,我们现在可以实现无限滚动(infinit…

    编程技术 2025年3月7日
    200

发表回复

登录后才能评论