Vue.js使用-组件（下篇）

上一节，我们定义了组件的基本使用，下面我们看看组件其他的一些特性。

1.组件作用域

同时在Vue对象和组件中定义一个属性，显示结果是怎样的呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{ msg }}
        <my-component></my-component>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        },
        components: {
            'my-component':{
                template: '<div>{{ msg }}</div>',
                data: function () {
                    return {
                        msg: 'hello shijingjing'
                    }
                }
            }
        }
    })
</script>
</html>

运行结果：

可见，都在各自的作用域内有效，且组件不影响Vue定义的属性。

如何让组件使用Vue定义的属性呢，上节已经提到过，使用props属性。如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <my-component v-bind:my-msg="msg"></my-component>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        },
        components: {
            'my-component':{
                template: '<div>{{ myMsg }}</div>',
                props: ['myMsg']
            }
        }
    })
</script>
</html>

运行结果：

2.slot占位符

slot的意思是卡槽，也就是一个占位符，内容由组件包含的内容而定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <my-component>
            <div>这是组件里面真正包含的内容</div>
        </my-component>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        components: {
            'my-component':{
                template: '<div>hello world</div><slot>这只是一个占位符，具体内容由component包含的内容来定</slot>'
            }
        }
    })
</script>
</html>

运行结果：

如果组件里面没有包含内容呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <my-component>
        </my-component>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        components: {
            'my-component':{
                template: '<div>hello world</div><slot>这只是一个占位符，具体内容由component包含的内容来定</slot>'
            }
        }
    })
</script>
</html>

运行结果：

可以再组件中包含占位符，来定义更为通用的组件。如一个对话框组件，不同时候弹出的标题不同，那么标题可以使用slot定义，真正内容放到组件内部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <my-component>
            <header slot="header">
                你好吗
            </header>
            <div slot="body">
                是的
            </div>
            <footer slot="footer">
                再见
            </footer>
        </my-component>
        ------------------------------------------------------
        <my-component>
            <header slot="header">
                早上好
            </header>
            <div slot="body">
                中午好
            </div>
            <footer slot="footer">
                晚上好
            </footer>
        </my-component>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        components: {
            'my-component':{
                template: '<div>hello world</div><slot name="header"></slot><slot name="body"></slot><slot name="footer"></slot>'
            }
        }
    })
</script>
</html>

运行结果：

3.组件之间数据访问

1)父组件访问子组件属性 $children

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        components: {
            'my-component':{
                template: '<div>hello world</div><child-component1></child-component1><button v-on:click="showChildData">显示组件</button>',
                components:{
                    'child-component1':{
                        template: '<div>hello child 1</div>',
                        data: function () {
                            return {
                                msg: 'child 1'
                            }
                        }
                    }
                },
                methods:{
                    showChildData: function () {
                        console.log(this.$children[0].msg);
                    }
                }
            }
        }
    })
</script>
</html>

运行结果：

除了$children，还可以使用v-ref:c1来给组件指定一个索引名称c1,查询子组件时，使用$refs.c1找到这个子组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        components: {
            'my-component':{
                template: '<div>hello world</div><child-component1 v-ref:c1></child-component1><button v-on:click="showChildData">显示子组件</button>',
                components:{
                    'child-component1':{
                        template: '<div>hello child 1</div>',
                        data: function () {
                            return {
                                msg: 'child 1'
                            }
                        }
                    }
                },
                methods:{
                    showChildData: function () {
                        console.log(this.$refs.c1.msg);
                    }
                }
            }
        }
    })
</script>
</html>

运行结果：

2)子组件访问父组件属性 $parent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        components: {
            'my-component':{
                template: '<div>hello world</div><child-component1></child-component1>',
                components:{
                    'child-component1':{
                        template: '<div>hello child 1</div><button v-on:click="showParentData">显示父组件</button>',
                        methods:{
                            showParentData: function () {
                                console.log(this.$parent.msg);
                            }
                        }
                    }
                },
                data: function () {
                    return {
                        msg: 'parent'
                    }
                }
            }
        }
    })
</script>
</html>

运行结果：

3)子组件访问根组件属性 $root

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'root'
        },
        components: {
            'my-component':{
                template: '<div>hello world</div><child-component1></child-component1>',
                components:{
                    'child-component1':{
                        template: '<div>hello child 1</div><button v-on:click="showRootData">显示根组件</button>',
                        methods:{
                            showRootData: function () {
                                console.log(this.$root.msg);
                            }
                        }
                    }
                }
            }
        }
    })
</script>
</html>

运行结果：

可见，根元素指的是Vue对象

由$children,$parent,$root可以实现父子组件，以及Vue对象间的数据交互，但是还是尽量使用props属性来传递数据，

可以避免父子组件的过度耦合，以及子组件修改了父组件中的数据。

4.组件之间事件传递

1)派发事件$dispatch,事件沿着父链冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{ message }}
        <my-component></my-component>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: ''
        },
        components: {
            'my-component':{
                template: ' <input v-model="msg" /><button v-on:click="notify">dispatch</button>',
                data: function () {
                    return {
                        msg: ''
                    }
                },
                methods:{
                    notify: function () {
                        this.$dispatch('child-msg', this.msg);
                    }
                }
            }
        },
        events:{
            'child-msg': function (msg) {
                this.message = msg;
            }
        }
    })
</script>
</html>

运行结果:

$.dispatch会将事件派发到父组件的events事件，父组件接收到子组件的派发后，调用child-msg事件。

2)broadcast广播事件，事件向下传导给所有的子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message"/>
        <button v-on:click="notify">broadcast</button>
        <my-component></my-component>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: ''
        },
        components: {
            'my-component':{
                template: '{{msg}}',
                data: function () {
                    return {
                        msg: ''
                    }
                },
                events:{
                    'parent-msg': function (msg) {
                        this.msg = msg;
                    }
                }
            }
        },
        methods:{
            notify: function () {
                this.$broadcast('parent-msg', this.message);
            }
        }
    })
</script>
</html>

运行结果：

$.broadcast会将事件广播到子组件的events事件，子组件接收到父组件的广播后，调用parent-msg事件。

Vue.js使用-组件（下篇）的更多相关文章

Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
Vue.js之组件传值
Vue.js之组件传值属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...
Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
Vue.js之组件嵌套
Vue.js中组件嵌套有两种方式第一种:注册全局组件例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...
vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...

随机推荐

git for c#,文件改动内容
private static void pushModify() { string wkDir = @"E:\DotNet2010\单位project\Git.Client\lib2Test ...
C#几个小知识点
一.float数据类型小数在C#中需要用浮点型表示,浮点值就是.后面的小数点.C#语言中有两种小数类型,分别为32位单精度浮点型(float) 和64位双精度浮点型(double).其中精度指的是小 ...
ios中 radioButton和DataPIcker，九宫格封装好使用
下载地址 http://pan.baidu.com/share/link?shareid=2894506499&uk=923776187 引用这几个文件 radiobutton.封装好单选按钮 ...
简述MVC
强调:mvc不是框架而是一种设计模式分层结构的好处:1.降低了代码之间的耦合性 2.提高了代码的重用性一. 概述 MVC的全名Model View Controller,即模型-视图-控制器的缩写 ...
构建高性能数据库缓存之redis（二）
一.概述在构建高性能数据库缓存之redis(一)这篇文档中,阐述了Redis数据库(key/value)的特点.功能以及简单的配置过程,相信阅读过这篇文档的朋友,对Redis数据库会有一点的了解,此 ...
nginx配置文件结构，语法，配置命令解释
摘要: nginx的配置文件类似于一门优雅的编程语言,弄懂了它的规范就可以自定义配置文件了,这个很重要~ 1,结构分析 nginx配置文件中主要包括六块:main,events,http,server ...
XP、Windows7下自动关机vbs脚本，使用windows计划任务+vbs脚本在XP、Windows7下实现定时自动关机
VBScript(Microsoft Visual Basic Script Edition).,微软公司可视化BASIC脚本版). 正如其字面所透露的信息, VBS(VBScript的进一步简写)是 ...
Haproxy TCP数据转发
在实际项目中需要用到haproxy做TCP转发,下面主要针对haproxy的安装及TCP数据转发配置进行说明一.安装Haproxy (1)编译安装Haproxy mkdir -p /data01/h ...
Docker 的技术组件
Docker可以运行于任何安装了现代Linux内核的x64主机上.推荐的内核版本是3.8或者更高.Docker的开销比较低,可用于服务器.台式机或者笔记本.它包括以下几个部分. 一个原生的Linux容 ...
C 语言整型谜题
如题,此篇文章是描述C语言中的整数谜题. 假定机器字长是32位的,用2的补码表示整数.对以下C表达式,请问它们在所有情况下都正确吗?如果不是,请给出反例. 初始化: 1 2 3 4 int x = f ...

Vue.js使用-组件（下篇）

Vue.js使用-组件（下篇）的更多相关文章

随机推荐

热门专题