热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vue组件以及组件运用的方式

组件的运用让代码重用性更强大。自定义组件,每一个组件都有这些东西1.全局定义(所有的vue实例都能使用)Vue.component(m

组件的运用让代码重用性更强大。


自定义组件,每一个组件都有

这些东西


1.全局定义(所有的vue实例都能使用)

Vue.component('my-btn',{

}) 


2.局部定义(用的较多)在 new Vue的构造函数中定义

   new Vue({

      data:{},//对象

      methods:{},

     components:{

          '组件名称 一般组件名称有个前缀  比如:  my-btn'  {  

                //这里是选项  与vue({})中的参数选项基本一致 比如放data:    methods:      computed:   都可以


       }

    }

})


注意:

   只有在父组件中,才能调用子组件!!!否则解析不了



组件应用:

1.使用标签  如   

2.使用is属性  如:

    s='my-btn'> 




子组件不能直接访问父data,如果希望能访问到,解决方法如下:

组件之间通信:

1) 父组件->子组件 (子组件访问父组件的数据)

    props 通过这个特性来实现+属性绑定


 2)   子组件->父组件 (子组件将状态反馈给父组件 ),通过自定义事件实现   通过this.$(emit) 去实现



推荐阅读
author-avatar
熊孝琳_506
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有