文档章节

vue多层次组件监听动作和属性

o
 osc_odyg6b92
发布于 2018/07/13 15:04
字数 347
阅读 14
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

v-bind="$attrs" v-on="$listeners"

Vue 2.4 版本提供了这种方法,将父组件中不被认为 props特性绑定的属性传入子组件中,通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性,是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁,业务清晰。

比如组件A=>B组件=>C组件等,这种多层级组件,A组件向C组件传递数据或者C组件的事件要触发A组件中的事件的话,就可以在B组件中写成
<template>
 <div>
    <span>{{child1}}<span>
 <!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
 <!-- 通过v-bind 绑定$attrs属性,C组件可以直接获取到A组件中传递下来的props(除了B组件中props声明的) -->
 <c v-bind="$attrs" v-on="$listeners"></c> </div> </template> <script> import c from './c.vue'; export default { props: ['child1'], data () { return {}; }, inheritAttrs: false, components: { c }, mounted () { this.$emit('test1'); } }; </script>

C组件

<template>
 <div>
    <span>{{child2}}<span>
 </div>
</template>
<script>
 export default {
 props: [child2'],
 data () {
 return {};
 },
 inheritAttrs: false,
 mounted () {
    this.$emit('test2');
 }
 };
</script>

A组件:

<template>
 <div id="app">
    <b :child1="child1" :child2="child2" @test1="test1" @test2="test2"></b> </div> </template> <script> import b from './b.vue'; export default { data () { return { child1:'hello child1', child2:'hello child2' }; }, components: { b }, methods: { test1 () { console.log('test1'); }, test2 () { console.log('test2'); } } }; </script>

 

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.2K
1
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
Flash 皮肤样式--Windows8UIStyle

Windows8UIStyle 模仿 Windows 8 的桌面用户界面,使得 FlashSwing 应用程序在 Windows 8 系统中拥有与传统应用程序一致的用户界面。 Windows8UIStyle 对 FlashSwing 默认主题的修改: 提供和...

Gregary
2013/02/19
1.3K
1
Swing界面分析和调试工具--Swing Inspector

Swing Inspector是一个Java Swing/AWT用户界面分析和调试工具,功能与firebug类似,具有强大的Swing/AWT用户界面分析和调试相关功能。 适用于从java swing初级到高级的所有开发人员,能够快速...

匿名
2013/03/06
3.4K
0
开源数据访问组件--Smark.Data

Smark.Data是基于Ado.net实现的数据访问组件,提供基于强类型的查询表达式进行灵活的数据查询,统计,修改和删除等操作;采用基于条件驱动的操作模式,使数据操作更简单轻松;内部通过标准SQL...

泥水佬
2013/03/12
2.6K
0

没有更多内容

加载失败,请刷新页面

加载更多

.NET Core学习笔记(5)——WebAPI从Server端push消息到Client

标题起得有点厉害,汉字夹杂着E文,不符合教育部公布的“向社会推荐使用的外语词中文译名”规范。不过他管不着我。写本篇的起因,是重构一个现有的WinForms程序,将Server端的部分逻辑从raw...

osc_gxvh47u5
今天
35
0
「网易官方」极客战记(codecombat)攻略-沙漠-一打宝石-diamond-dozen

(点击图片进入关卡) 在荒漠中,打败兽人军团的同时,高效收集金币。 简介 有时最近的金币不是最好的金币。 我们已经给你一个叫 valueOverDistance() 的函数。 用这个函数找到最好的金币,在它...

极客战记
今天
36
0
已知弧长和弦长求半径

今天在同学群里有人问“弧长2.8,弦长2.45,求半径”,原以为很简单,解个方程就出来了,动手之后才发现是超越方程求不出精确解。 随后用迭代法解了出来,思路如下: 在线测试:http://jsbi...

osc_inj0cicw
今天
13
0
省市区选择

mobile-area-js.rar <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta name="viewport" content="width=......

osc_c1s5s3wj
今天
12
0
Python连接数据库执行增删改语句,Oracle下获取影响的行数

连接数据库执行增删改语句,要获取影响的行数 之前使用的是: sql = 'insert into...' cursor = db_conn.cursor() row_count = cursor.execute(sql) logger.debug('影响行数:', row_count ......

乐_然
今天
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部