Vue.js学习笔记第八篇组件

全局注册组件

<!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学习笔记第八篇组件的更多相关文章

Vue.js 学习笔记第7章组件详解
本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发组件(Compon ...
Vue.js学习笔记第七篇表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
Vue.js学习笔记第六篇内置属性
computed属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
Vue.js学习笔记第五篇事件处理
监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
Vue.js学习笔记第四篇列表渲染
遍历数组和对象和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta ch ...
Vue.js学习笔记第三篇条件渲染
条件选择条件选择的用法和其他语言类似,一个例子就能解决所有问题 <!DOCTYPE html> <html> <head> <meta charset=&q ...
Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具基础类型数组元组枚举字面量接口类类型类类型要素函数函数参数 this对象和类型重载迭代器 Symbol.iterat ...
Vue.js学习笔记：在元素和 template 中使用 v-if 指令
f 指令语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

随机推荐

Vmware私有云虚拟机（CentOS 6.5 OS）之根分区扩容
注:适用于未使用lvm管理的分区,目前仅在CentOS 6.5 上操作,其他系统尚未测试,请谨慎操作一.查看当前分区状况 [root@disk-test ~]# df -h Filesystem ...
C++11写算法之顺序查找
从这篇博文起,将尝试使用C++11来写常用算法与数据结构. 本篇博文以最简单的顺序查找作为系列博文的起点,并作约定如下: 1,变量名 : varList : 函数名 : SequentialFind ...
循环遍历完成后再进行else判断
有时需要在循环遍历完后再进行else操作,通常的办法是在循环前设置一个flag,用于判断.具体例子如下:
哈工大LTP
http://ltp.ai/ http://pyltp.readthedocs.io/zh_CN/latest/ http://www.cnblogs.com/Denise-hzf/p/6612886 ...
css单行排版
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
次小生成树模板（poj1679）
prim #include <iostream> #include <cstdio> #include <cstdlib> #include <cmath&g ...
2588: Spoj 10628. Count on a tree
2588: Spoj 10628. Count on a tree Time Limit: 12 Sec Memory Limit: 128 MBSubmit: 5766 Solved: 1374 ...
inner join和out join的区别
inner join(又叫join) out join包括left join,right join和full join(也就是left+right)
迷宫问题（java实现）
1. public class Direction { private int x; private int y; public Direction(int x, int y) { this.x = ...
JS和C# 里的闭包及闭包在事件中的使用
在Javascript世界里,无所不用闭包及自定义事件, 自定义事件其实也是事先定义好一种规则 ,当触发者被响应后执行的一段回调.下面看个例子 function dothing(callBack){ ...

Vue.js学习笔记 第八篇 组件