上一篇我们重点介绍了组件的创建、注册和使用,熟练这几个步骤将有助于深入组件的开发。另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:“嘿,老哥,我开通了一个驿站,你把东西放到驿站我就可以拿到了。”

  今天我们将着重介绍slot和父子组件之间的访问和通信。slot是一个非常有用的东西,它相当于一个内容插槽,它是我们重用组件的基础。Vue的事件系统独立于原生的DOM事件,它用于组件之间的通信。

  注意:组件模板都定义在<template>标签中,然而IE不支持<template>标签,这使得在IE中<template>标签中的内容会显示出来。

  解决办法——隐藏<template>标签

template{
display: none;
}

一、编译作用域

  尽管使用组件就像使用一般的HTML元素一样,但它毕竟不是标准的HTML元素,为了让浏览器能够识别它,组件会被解析为标准的HTML片段,然后将组件的标签替换为该HTML片段。

<div id="app">
<my-component>
</my-component>
</div> <template id="myComponent">
<div>
<h2>{{ msg }}</h2>
<button v-on:click="showMsg">Show Message</button>
</div>
</template>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
components: {
'my-component': {
template: '#myComponent',
data: function() {
return {
msg: 'This is a component!'
}
},
methods: {
showMsg: function() {
alert(this.msg)
}
}
}
}
})

  这段代码定义了一个my-component组件,<my-component><my-component>不是标准的HTML元素,浏览器是不理解这个元素的。那么Vue是如何让浏览器理解<my-component><my-component>标签的呢?

  在创建一个Vue实例时,除了将它挂载到某个HTML元素下,还要编译组件,将组件转换为HTML片段。除此之外,Vue实例还会识别其所挂载的元素下的<my-component>标签,然后将<my-component>标签替换为HTML片段。实际上浏览器仍然是不理解<my-component>标签的,我们可以通过查看源码了解到这一点。

  组件在使用前,经过编译已经被转换为HTML片段了,组件是有一个作用域的,那么组件的作用域是什么呢?你可以将它理解为组件模板包含的HTML片段,组件模板内容之外就不是组件的作用域了。例如,my-component组件的作用域只是下面这个小片段。

  组件的模板是在其作用域内编译的,那么组件选项对象中的数据也应该是在组件模板中使用的。考虑下面的代码,在Vue实例和组件的data选项中分别追加一个display属性:

new Vue({
el: '#app',
data: {
display: true
},
components: {
'my-component': {
template: '#myComponent',
data: function() {
return {
msg: 'This is a component!',
display: false
}
},
methods: {
showMsg: function() {
alert(this.msg)
}
}
}
}
})

  然后在my-component标签上使用指令v-show="display",这个display数据是来源于Vue实例,还是my-component组件呢?

<div id="app">
<my-component v-show="display">
</my-component>
</div>

  答案是Vue实例。

  至此,我们应该认识到组件的作用域是独立的:父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译

  通俗地讲,在子组件中定义的数据,只能用在子组件的模板。在父组件中定义的数据,只能用在父组件的模板。如果父组件的数据要在子组件中使用,则需要子组件定义props。

二、使用Slot

  为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个处理称为内容分发,Vue.js 实现了一个内容分发 API,使用特殊的 <slot> 元素作为原始内容的插槽。如果不理解这段话,可以先跳过,你只要知道<slot>元素是一个内容插槽。

1、单个Slot

  下面的代码在定义my-component组件的模板时,指定了一个<slot></slot>元素。

<div id="app">
<my-component v-show="display">
<h1>Hello Vue.js!</h1>
</my-component>
<my-component>
</my-component>
</div>
<template id="myComponent">
<div>
<h2>{{msg}}</h2>
<slot>如果没有分发内容,则显示slot中的内容</slot>
<button @click="showMsg">show Msg</button>
</div>
</template>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
display:true
},
components:{
"my-component":{
template:"#myComponent",
data:function(){
return {
msg:"myComponent",
display:false
}
},
methods:{
"showMsg":function(msg){
alert(this.msg);
}
}
}
}
})
</script>

  第一个<my-component>标签有一段分发内容<h1>Hello Vue.js!</h1>,渲染组件时显示了这段内容。

  第二个<my-component>标签则没有,渲染组件时则显示了slot标签中的内容。

  简而言之,slot就是一个占位符,当template里面有内容时就把位置给它显示;当没有内容时,就默认显示slot里的内容

2、指定名称的slot

  上面示例是一个匿名slot,它只能表示一个插槽。如果需要多个内容插槽,则可以为slot元素指定name属性。

  多个slot一起使用时,会非常有用。例如,对话框是HTML常用的一种交互方式。在不同的运用场景下,对话框的头部、主体内容、底部可能是不一样的。

//使用时,用name
<slot name="header"></slot> //定义时
<header class="dialog-header" slot="header">
<h1 class="dialog-title">提示信息</h1>
</header>

三、父子组件之间的访问

  有时候我们需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件。针对这几种情况,Vue.js都提供了相应的API:

  1、父组件访问子组件:使用$children或$refs

  在父组件中,通过this.$children可以访问子组件。this.$children是一个数组,它包含所有子组件的实例。

  组件个数较多时,我们难以记住各个组件的顺序和位置,通过序号访问子组件不是很方便。在子组件上使用v-ref指令,可以给子组件指定一个索引ID:

<template id="parent-component">
<child-component1 v-ref:cc1></child-component1>
<child-component2 v-ref:cc2></child-component2>
<button v-on:click="showChildComponentData">显示子组件的数据</button>
</template>

  在父组件中,则通过 "$refs.索引ID" 访问子组件的实例:

showChildComponentData: function() {
alert(this.$refs.cc1.msg);
alert(this.$refs.cc2.msg);
}

  2、子组件访问父组件:使用$parent

  在子组件中,通过this.$parent可以访问到父组件的实例。

  3、子组件访问根组件实例:使用$root

  注意:尽管可以访问父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据。

  另外,在子组件中修改父组件的状态是非常糟糕的做法,因为: (1)这让父组件与子组件紧密地耦合; (2)只看父组件,很难理解父组件的状态。因为它可能被任意子组件修改!理想情况下,只有组件自己能修改它的状态。

四、自定义事件

  有时候我们希望触发父组件的某个事件时,可以通知到子组件;触发子组件的某个事件时,可以通知到父组件。

  Vue 实例实现了一个自定义事件接口,用于在组件树中通信。这个事件系统独立于原生 DOM 事件,用法也不同。

  每个 Vue 实例都是一个事件触发器:

    (1)使用 $on() 监听事件;

    (2)使用 $emit() 在它上面触发事件;

    (3)使用 $dispatch() 派发事件,事件沿着父链冒泡;

    (4)使用 $broadcast() 广播事件,事件向下传导给所有的后代。

1、派发事件

  下面这段代码是一个简单的事件派发处理

<div id="app">
<p>Messages: {{ messages | json }}</p>
<child-component></child-component>
</div>
<template id="child-component">
<input v-model="msg" />
<button v-on:click="notify">Dispatch Event</button>
</template>
<script src="vue.js"></script>
<script>
// 注册子组件
Vue.component('child-component', {
template: '#child-component',
data: function() {
return {
msg: ''
}
},
methods: {
notify: function() {
if (this.msg.trim()) {
this.$dispatch('child-msg', this.msg);
this.msg = ''
}
}
}
}) // 初始化父组件
new Vue({
el: '#app',
data: {
messages: []
},
events: {
'child-msg': function(msg) {
this.messages.push(msg)
}
}
})
</script>

  我们将这个示例分为几个步骤解读:

    子组件的button元素绑定了click事件,该事件指向notify方法

    子组件notify方法在处理时,调用了$dispatch,将事件派发到父组件child-msg事件,并给该该事件提供了一个msg参数

    父组件的events选项中定义了child-msg事件,父组件接收到子组件的派发后,调用child-msg事件。

  结果:

2、广播事件

  下面这段代码是一个简单的事件广播处理

<div id="app">
<input v-model="msg" />
<button v-on:click="notify">Broadcast Event</button>
<child-component></child-component>
</div>
<template id="child-component">
<ul>
<li v-for="item in messages">
父组件录入了信息:{{ item }}
</li>
</ul>
</template>
<script src="vue.js"></script>
<script>
// 注册子组件
Vue.component('child-component', {
template: '#child-component',
data: function() {
return {
messages: []
}
},
events: {
'parent-msg': function(msg) {
this.messages.push(msg)
}
}
})
// 初始化父组件
new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
notify: function() {
if (this.msg.trim()) {
this.$broadcast('parent-msg', this.msg);
this.msg = '';
}
}
}
})
</script>

  我们将这个示例分为几个步骤解读:

    父组件的button元素绑定了click事件,该事件指向notify方法

    父组件notify方法在处理时,调用了$broadcast,将事件派发到子组件parent-msg事件,并给该该事件提供了一个msg参数

    子组件的events选项中定义了parent-msg事件,子组件接收到父组件的广播后,调用parent-msg事件

  结果:

3、$on监听事件,$emit触发事件

  现在$dispatch、$broadcast需要配合events使用,在vue2.0上已经被删除了,现在更多的是使用$on监听事件、$emit触发事件。主要分为以下四步:

  (1)子组件绑定send事件

<template id="bbb">
<h3>子组件-</h3>
<input type="button" value="send" @click="send">
</template>

  (2)子组件通过$emit主动触发事件,发送数据到父组件

methods:{
send(){//2、子组件通过$.emit主动发送数据a到父级
this.$emit('child-msg',this.a);
}
}

  (3)父组件通过v-on监听子组件触发的事件

<template id="aaa">
<span>我是父级 -> {{msg}}</span>
//3、父组件绑定接收事件,接收的一边是子组件里的事件名,一边是父组件里面需要定义的事件名
<bbb @child-msg="get"></bbb>
</template>

  (4)父组件接受子组件发送的数据

methods:{
//4、父组件接收子组件发送的数据,作为参数,改变自己里面数据
get(msg){
this.msg=msg;
}
}

Vue组件进阶知识总结的更多相关文章

  1. Vue组件基础知识总结

    组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树. 那么什么是组件呢?组件可以扩展HTML元素,封装 ...

  2. Vue基础二之全局API、实例属性和全局配置,以及组件进阶(mixins)的详细教程(案列实现,详细图解,附源码)

    本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...

  3. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  4. vue组件知识总结

    vue组件化开发 将一个页面分割成若干个组件,一个页面js+css+html,将自己类容分割出来,方便开发,更好了维护我们的代码,每个组件封装自己的js+html+css,样式命名冲突 组件分类 页面 ...

  5. Spring实战3:装配bean的进阶知识

    主要内容: Environments and profiles Conditional bean declaration 处理自动装配的歧义 bean的作用域 The Spring Expressio ...

  6. JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  7. Vue组件库的那些事儿,你都知道吗?

    前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...

  8. Vue组件开发实践之scopedSlot的传递

    收录待用,修改转载已取得腾讯云授权 导语 现今的前端开发都讲究模块化组件化,即把公共的交互和功能封装到一个个的组件之中,在开发整体界面的时候就能像搭积木一样快速清晰高效.在使用Vue开发我们的vhtm ...

  9. 阿里oss上传图片react组件alioss-react,vue组件alioss-vue (不用我先收藏着,后端看下前端处理方法)

    1.介绍 最近开发了一个项目,其中需要一个上传图片到阿里云的 oss 上面,就是上传图片到阿里云的 oss 上面. 因为之前开发过 vue 的阿里云 oss 上传,所以直接复制粘 vue 的组件. 因 ...

随机推荐

  1. HDU1142 (Dijkstra+记忆化搜索)

    A Walk Through the Forest Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Jav ...

  2. C++ Primer 阅读笔记:迭代器和容器 小结

    原创 by zoe.zhang  0.写在前面的话 我是在2011年学的C++,但是那一年恰好是C++11新标准的一年,但是大学上学的C++还是基于C++98的风格的,使用的编译器也是VC6.0,啊, ...

  3. text-shadow

    text-shadow,文字阴影,通过text-shadow不使用ps可以实现文字阴影特效,可以让页面变得更加美观. text-shadow语法 text-shadow : none | <le ...

  4. Spring --- 异常处理机制

    1.定义全局异常处理器,为全局的异常,如出现将调用 error.JSP <!-- 定义异常处理器 --> <bean class="org.springframework. ...

  5. getResourceAsStream用法详解

    //使用绝对路径,否则无法读取config.properties //InputStream inStream=new FileInputStream("F:\\android\\test\ ...

  6. pythn抓取网页小例子

    import urllib.request import re from tkinter import * win = Tk() win.geometry('500x300+400+300') t = ...

  7. k8s通过configmap管理应用配置信息

    Secret 可以为 Pod 提供密码.Token.私钥等敏感数据:对于一些非敏感数据,比如应用的配置信息,则可以用 ConfigMap. ConfigMap 的创建和使用方式与 Secret 非常类 ...

  8. 关系和非关系型数据库区别(以及oracle和mysql的区别)

    一.关系型数据库 关系型数据库,是指采用了关系模型来组织数据的数据库.    关系模型是在1970年由IBM的研究员E.F.Codd博士首先提出的,在之后的几十年中,关系模型的概念得到了充分的发展并逐 ...

  9. redis持久化的方法及对比

    1.持久化的作用 redis所有的数据保持在内存中,对数据的更新将异步的保存到磁盘上. 两种方式: 2.RDB 2.1.概念 2.2.触发机制 2.2.1.save 同步 因为是同步命令,数据量大的话 ...

  10. Request 部分功能

    Request 六大功能: 1.获取客户端请求信息: getRequestURL方法 -- 返回客户端发出请求完整URL getRequestURI方法 -- 返回请求行中的资源名部分 getQuer ...