下面我就为大家分享一篇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