全局注册组件

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="https://unpkg.com/vue"></script>

</head>

<body>

    <div id="app-1">

        <global-component></global-component>

    </div>

    <script type="text/javascript">

        Vue.component('global-component', {

            template: '<div>一个自定义全局组件！</div>'

        })

        var vm1 = new Vue({

            el: '#app-1'

        })

    </script>

</body>

</html>

global-component是自定义标签名称，建议遵循W3C规则（全部小写，必须包含连字符(-)）

全局注册组件的语法格式为Vue.component(tagName, options)

全局注册的组件要在Vue实例化之前注册完成

局部注册组件

<div id="app-1">

    <local-component></local-component>

</div>

<script type="text/javascript">

    var localComponent = {

        template: '<div>一个自定义局部组件！</div>'

    }

    var vm1 = new Vue({

        el: '#app-1',

        // 局部注册的组件只能在父级模板中使用

        components: {

            'local-component': localComponent

        }

    })

</script>

Vue对象实例化时，第5个参数类型components(组件)

局部注册的组件是有作用域的，他只能在父级模板中使用，也就是el指定的标签内使用

使用Props属性传参

<div id="app-2">

    <input v-model="content" placeholder="这里输入组件参数">

    <global-component v-bind:param="content"></global-component>

</div>

<script type="text/javascript">

    Vue.component('global-component', {

        props: ['param'],

        template: '<div>组件的参数：{{ param }}</div>'

    })

    var vm2 = new Vue({

        el: '#app-2',

        data: {

            content: ''

        }

    })

</script>

组件可以通过props属性来实现传参

列表渲染在组件中使用

一个很好玩的例子，把完整的代码贴出来

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="https://unpkg.com/vue"></script>

</head>

<body>

    <div id="app-3">

        <input

            v-model="newTodoText"

            v-on:keyup.enter="addNewTodo"

            placeholder="输入一个等办事项"

        >

        <ul>

            <li

                is="global-component"

                v-for="(todo, index) in todos"

                v-bind:key="todo.id"

                v-bind:title="todo.title"

                v-on:remove="todos.splice(index, 1)"

            ></li>

        </ul>

    </div>

    <script type="text/javascript">

        // 使用$on(eventName)监听一个事件

        // 使用$emit(eventName)触发一个事件

        Vue.component('global-component', {

            template: '\

                <li>\

                    {{ title }}\

                    <button v-on:click="$emit(\'remove\')">X</button>\

                </li>\

            ',

            props: ['title']

        })

        var vm3 = new Vue({

            el: '#app-3',

            data: {

                newTodoText: '',

                todos: [

                    { id: 1, title: '洗碗' },

                    { id: 2, title: '倒垃圾' },

                    { id: 3, title: '除草' },

                ],

                nextTodoId: 4

            },

            methods: {

                addNewTodo: function() {

                    this.todos.push({

                        id: this.nextTodoId++,

                        title: this.newTodoText

                    })

                    this.newTodoText = ''

                }

            }

        })

    </script>

</body>

</html>

Vue.js学习笔记 第八篇 组件的更多相关文章

  1. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  2. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  3. Vue.js学习笔记 第六篇 内置属性

    computed属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  4. Vue.js学习笔记 第五篇 事件处理

    监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  5. Vue.js学习笔记 第四篇 列表渲染

    遍历数组和对象 和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta ch ...

  6. Vue.js学习笔记 第三篇 条件渲染

    条件选择 条件选择的用法和其他语言类似,一个例子就能解决所有问题 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  8. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  9. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

随机推荐

  1. C# winform中 选择文件和保存文件

    转载自https://blog.csdn.net/qq_31788297/article/details/62047952 我们在使用桌面软件的时候经常会使用到选择文件并打开和另存为等的窗口,这样方便 ...

  2. ssh远程登录+查看系统版本+使用scp命令上传下载

    ssh远程登录命令简单实例   ssh命令用于远程登录上Linux主机.   常用格式:ssh [-l login_name] [-p port] [user@]hostname 更详细的可以用ssh ...

  3. <转> python的垃圾回收机制

    Python的GC模块主要运用了“引用计数”(reference counting)来跟踪和回收垃圾.在引用计数的基础上,还可以通过“标记-清除”(mark and sweep)解决容器对象可能产生的 ...

  4. cocos2d-x设计模式发掘之一：单例模式

       作者: firedragonpzy  原地址:http://www.firedragonpzy.com.cn/index.php/archives/1781 本系列文章我将和大家一起来发掘coc ...

  5. 关东升的《从零开始学Swift》即将出版

    大家好: 苹果2015WWDC大会发布了Swift2.0,它较之前的版本Swift1.x有很大的变化,所以我即将出版<从零开始学Swift> <从零开始学Swift>将在< ...

  6. docker-compose安装confluence

    1.首先安装docker-compose   pip install docker-compose       安装完成提示:         2.编写mysql-confluence-compose ...

  7. Linux 入门介绍

    背景:最近在搞redis 集群  ,然后有时候会怀疑自己,那么问题来了, 怀疑自己就是自己不扎实!  记忆不好了!  写下来备份吧! 才入门时候总是会想 ,Linux 下面文件夹都是什么意思! bin ...

  8. 学习编译并运行C代码

    以<UNIX网络编程>中的代码为例,学习如何编译并运行C代码. 根据 UNIX网络编程(第3版)环境搭建——使用MAC OSX10.10,能够成功运行 1.下载本书的头文件及示例源码原书地 ...

  9. Linux学习拾遗

    一.安装iso文件 首先建立一个目录作为挂载点:# mkdir /mnt/iso 获得root权限然后使用下面的参数挂载ISO映像文件:# mount -t iso9660 /path/image.i ...

  10. 使用QFile进行文件操作（QFile可以使用FILE *指针，还必须指定AutoCloseHandle）

    QFile类我我们提供了操作文件的常用功能.它是一种io设备,可以用来读写文本文件和二进制文件,也可以用来读写Qt的资源文件.QFile类可以单独使用,该类本身提供了read/write函数,但更方便 ...