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" " ...

随机推荐

WPF-Binding的源
1. 绑定到其它元素 <Grid> <StackPanel> <TextBox x:Name="textbox1" /> <Label C ...
ChemDraw能够生成化学性质报告吗
ChemDraw破解版是一种不安全的软件版本,危害用户信息安全,一些不法分子正是因利用用户寻求免费软件的心理以ChemDraw破解版.ChemDraw注册机为噱头传播不安全信息.如果使用者已经成功安装 ...
day22模块和包
一.模块常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代码(. ...
spring无法启动常见原因及排查方法
这里总结的问题,通常啥错误也不报,需要自个debug排查,当然每个人遇到的问题可能是不同的,这里仅仅是我个人帮同事解决问题后的一些总结,可能网上的小伙伴可能也遇到,姑且简单记录一下: 1. mybat ...
ios如何在当前工程中添加编辑新建的FramesWork
本文转载至 http://www.apkbus.com/android-131519-1-1.html,感谢原文作者的分享. naniboy 该用户从未签到可能很多大牛都见过FaceBo ...
Android开发：fragment将事件传递回activity
fragment触发事件后传递会给activity,可以通过在fragment中定义一个接口,让activity实现这个接口. 具体代码如下 public class AAFragment exten ...
IntelliJ IDEA使用手册
开发工具现在转到IDEA了,看到关于该工具很好的入门文档,于是记录一下: IntelliJ IDEA 使用教程
Parenthesis(前缀和+线段树)
1809: Parenthesis Time Limit: 5 Sec Memory Limit: 128 Mb Submitted: 2291 Solved: 622 Des ...
记录--java 分页思路 (hibernate关键代码)
有时会脑袋蒙圈,记录下分页的思路下面代码是hibernate的分页,其分页就是从第几条数据为起点,取几条数据.比如在mysql中的limit(5,10)取的就是第6条到第10条在下面代码中的pag ...
JavaScript数据结构与算法-字典练习
字典的实现 // 字典类 function Dictionary () { this.add = add; this.dataStore = new Array(); this.find = find ...

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