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

随机推荐

Eigen求矩阵行列式及行列式本质
转置.伴随.行列式.逆矩阵小矩阵(4 * 4及以下)eigen会自动优化,默认采用LU分解,效率不高 #include <iostream> #include <Eigen/Den ...
添加可点击的imagebottom，有个点击动画效果
android添加可点击的按钮,有个动画切换 ,首先定义一个 res/drawable中定义一个 btn_shutter_background.xml,其定义举例如下: <?xml versio ...
ios -完全实现代码设置 Could not find a storyboard named 'Main' in bundle NSBundle
UIWindow *windows = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds]; windows.background ...
mysql 高级语法手记
Select字段时: CASE WHEN type=1 THEN 1 ELSE 0 END as type1 sum和count同样可以使用case then 时间戳转时间: FRO ...
urllib -- ProxyHandler处理器（代理设置）
import urllib.requestimport randomimport ssl proxy_list = [ {"https" : "196.61.27.58: ...
Jmeter中中文乱码
jmeter-察看结果树-响应数据中的中文显示乱码 jmeter\bin\jmeter.properties 默认编码为:ISO-8859-1# The encoding to be used if ...
【BZOJ1930】[Shoi2003]pacman 吃豆豆最大费用最大流
[BZOJ1930][Shoi2003]pacman 吃豆豆 Description 两个PACMAN吃豆豆.一开始的时候,PACMAN都在坐标原点的左下方,豆豆都在右上方.PACMAN走到豆豆处就会 ...
1677 treecnt(贡献)
1677 treecnt 基准时间限制:1 秒空间限制:131072 KB 分值: 40 难度:4级算法题给定一棵n个节点的树,从1到n标号.选择k个点,你需要选择一些边使得这k个点通过选择的边联 ...
关于在react和node中，经常出现的const
const是定义一个常量,在ECM6当中,定义局部变量可以用let.定义全局变量用var......这是ECM6的新特性,好吧,包子在这里只是记录一下,希望大家在将来写react或者node的时候,不 ...
linux磁盘清理
一.背景: 1.由于linux系统空间是由挂载磁盘得来的,但有时装系统时挂载/根目录空间不大,现仅清除用户下载的大文件二.方法: 1.输入命令df -h显示当前磁盘挂载(包含剩余空间)情况这里写图片 ...

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