美文网首页
Node.js开发笔记-12:vue组件小记

Node.js开发笔记-12:vue组件小记

作者: 原味蛋炒饭 | 来源:发表于2017-10-12 16:21 被阅读14次

自定义vue的组件
1.可以是写在其他.vue文件中

引用方式:
<script>
  import packpackVue from './backpackView.vue';
export default {
    name: 'note',
    components: {
      packpackVue
    },
}
</script>

然后就可以直接用了:
<packpackVue :role="role" v-on:closeAction="closeMethod"></packpackVue>

2.通过注册vue的方式来使用,
注册又分为局部注册和全局注册

局部注册:
<script>
        // 1.创建一个组件构造器
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })
        
        new Vue({
            el: '#app',
            components: {
                // 2. 将myComponent组件注册到Vue实例下
                'my-component' : myComponent
            }
        });
    </script>

全局注册:
<script>
    
        // 1.创建一个组件构造器
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })
        
        // 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
        Vue.component('my-component', myComponent)
        
        new Vue({
            el: '#app'
        });
        
    </script>

相关文章

  • Node.js开发笔记-12:vue组件小记

    自定义vue的组件1.可以是写在其他.vue文件中 2.通过注册vue的方式来使用,注册又分为局部注册和全局注册

  • vue文档集合

    Vue2使用笔记3--父子组件的通信Vue 2.0开发实践(组件间通讯)Event Bus 在Vue中的使用vue...

  • vue(2)

    Vue组件化开发 组件化开发的思想 组件的注册 组件间的数据交互 组件插槽的用法 Vue调试工具的用法 组件开发思...

  • 如何开发vue、react、angular的组件库教程

    关键词:vue,react,angular,开发,封装,ui组件,组件库,常用组件 目标:开发相应的组件库vue-...

  • Vue磨刀嚯嚯

    Vue开发风格——传统方法应用vue.js Vue开发风格——单个组件式 组件 基本操作 创建一个组件构造器 注册...

  • 使用vue-cli开发web的基础(一)-环境配置安装

    Vue 安装: 使用vue-cli脚手架开发项目,vue-cli是基于node.js,首先安装配置node.js ...

  • vue开发组件设置*.vue文件模板

    title: vue组件开发模板date: 2016-11-21 开发模板 规范 本文介绍vue组件开发的模板,在...

  • Vue从零开始

    一、vue-cli 脚手架搭建 vue 开发环境 安装 node.js,node.js 自带 npmNode.js...

  • 五、Vue生态介绍

    一、Vue组件库Vue组件库是使用Vue框架开发的组件,一般包含着开发者可以直接使用的基础组件:表单、弹窗、表格等...

  • vue组件生命周期挂载顺序

    title: vue组件挂载顺序date: 2016-12-02 vue组件挂载顺序 本文通过实验介绍vue组件的...

网友评论

      本文标题:Node.js开发笔记-12:vue组件小记

      本文链接:https://www.haomeiwen.com/subject/huloyxtx.html