全局注册组件

<!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. python3----字符串格式化(format)

    用法: 它通过{}和:来代替传统%方式 1.使用位置参数 要点:从以下例子可以看出位置参数不受顺序约束,且可以为{},只要format里有相对应的参数值即可,参数索引从0开,传入位置参数列表可用*列表 ...

  2. 【Android 多语言切换简单实例分享】

    一.Android多语言切换 Android应用的开发不可能仅仅针对某一个国家或者区域使用,各国间语言文化各不同样,因此一个优秀的APP必须支持多种语言,为了实现这个特性,Android给出了一个解决 ...

  3. jmeter安装启动报错：Not able to find Java executable or version. Please check your Java installation

    1.xp安装jmeter后启动,出现下面错误,找了很多方法试了,都没有用: 2.最后找到一个方法解决了[感谢无名大神],在环境变量PATH中添加:%SystemRoot%/system32;%Syst ...

  4. 41、Android中当数据库需要更新时我们该怎么办？

    转载  http://blog.csdn.net/jiangwei0910410003/article/details/39670813

  5. Linux 的字符串截取很有用。有八种方法。

    假设有变量 var=http://www.aaa.com/123.htm 1. # 号截取,删除左边字符,保留右边字符. echo ${var#*//} 其中 var 是变量名,# 号是运算符,*// ...

  6. JS中的关键字和保留字

    JavaScript中不能作为变量名的关键字和保留字总结: 1.js中的关键字: break case catch continue default delete do else finally fo ...

  7. SteinerTree模板

    #define N 55//所有点的个数 #define K 10//SteinerTree 最大顶点数,必须精确 #define INF 10000000 //SteinerTree 邻接矩阵模板. ...

  8. 【BZOJ4325】NOIP2015 斗地主 搜索+剪枝

    [BZOJ4325]NOIP2015 斗地主 Description 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗 ...

  9. 《挑战程序设计竞赛》2.1 穷竭搜索 POJ2718 POJ3187 POJ3050 AOJ0525

    POJ2718 Smallest Difference Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6509   Acce ...

  10. 使用 Docker 部署 MongoDB 复制集

    启用三个 mongod 建立复制集. MongoDB 版本选择目前最新的稳定版 3.6.2-jessie. docker run --name mongo0 -d mongo:3.6.2-jessie ...