vue组件通信（props,$emit,$attrs,$listeners）
vue基础----组件通信（props,$emit,$attrs,$listeners）
一、父传子，子传孙
1. props
1>在父组件中通过子组件自定义的标签属性来传递数据。
2>在子组件中通过props声明希望用到的数据
1 <body>
2 <div id="app">
3 <my-father :msg1="msg" a="10" :b="20" @click1="fn"></my-father>
4 </div>
5 <script src="./node_modules/vue/dist/vue.js"></script>
6 <script>
7 let vm = new Vue({
8 el:"#app",
9 data:{
10 msg:"hello yilia"
11 },
12 methods:{
13 fn(){
14 console.log("father");
15 }
16 },
17 components:{
18 "my-father":{
19 // props:['msg1'],
20 // template:`<div><h1>{{msg1}}</h1><my-son :msg2="msg1"></my-son></div>`,
21 created(){
22 console.log(this.$attrs);
23 console.log(this.$listeners);
24 console.log(this);
25
26 },
27 template:`<div><h1></h1><my-son v-bind="$attrs" v-on="$listeners"></my-son></div>`,
28 data(){
29 return {
30
31 }
32 },
33 components:{
34 "my-son":{
35 props:['msg1'],
36 template:`<p @click="$listeners.click1()">{{msg1}}</p>`,
37 inheritAttrs:true,
38 data(){
39 return{
40 }
41 }
42 }
43 }
44 }
45 }
46 });
47
48 </script>
49
50 </body>
1.1这里需要注意的props 除了上述这种写法，还可以写成对象形式，来校验数据
1 props: {
2 a: {
3 type: Number,
4 default: 10
5 },
6 b: {
7 type: String,
8 validator(val) {
9 return val>0; // "2">0
10 }
11 },
12 arr: {
13 type: Array,
14 //假如属性是数组或对象 默认值需要通过函数返回
15 default:()=>([1])
16 }
17 },
2.有时候my-father这块用不到数据，但需要把爷爷的数据传给孙子，可以用$attrs,在 my-son v-bind="$attrs"
this.$attrs 对没有使用的属性保留在this.$attrs (也就是props中没有申明的属性)
1 <body>
2 <div id="app">
3 <my-father :msg1="msg" a="10" :b="20" @click="fn"></my-father>
4 </div>
5 <script src="./node_modules/vue/dist/vue.js"></script>
6 <script>
7 let vm = new Vue({
8 el:"#app",
9 data:{
10 msg:"hello Yilia"
11 },
12 methods:{
13 fn(){
14 console.log("father");
15 }
16 },
17 components:{
18 "my-father":{
19 // props:['msg1'],
20 template:`<div><h1></h1><my-son v-bind="$attrs"></my-son></div>`,
21 data(){
22 return {
23 }
24 },
25 components:{
26 "my-son":{
27 props:['msg1'],
28 template:`<p>{{msg1}}</p>`,
29 inheritAttrs:true, //为false的时候，没有用到的数据不会显示在dom结构上
30 data(){
31 return{
32 }
33 }
34 }
35 }
36 }
37 }
38 });
39 </script>
40 </body>
二、点击子组件，调用父组件的方法 (想在父组件中绑定原生事件给组件)
1.需要添加修饰符native,不添加就被当作一个属性对待
1 <body>
2 <div id="app">
3 <!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
4 <my-button @click.native="fn"></my-button>
5 </div>
6 <script src="./node_modules/vue/dist/vue.js"></script>
7 <script>
8 let vm = new Vue({
9 el: "#app",
10 methods:{
11 fn() {
12 console.log("fn() is called");
13 }
14 },
15 components: {
16 "MyButton": {
17 template: `
18 <div>
19 点我
20 </div>`
21 }
22 }
23 });
24 </script>
25 </body>
点击 “点我” 的时候父组件的fn函数被调用。
2.$listeners 绑定所有的方法，直接调用父组件的方法
1 <body>
2 <div id="app">
3 <!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
4 <my-button @click="fn"></my-button>
5 </div>
6 <script src="./node_modules/vue/dist/vue.js"></script>
7 <script>
8 let vm = new Vue({
9 el: "#app",
10 methods:{
11 fn() {
12 console.log("fn() is called");
13 }
14 },
15 components: {
16 "MyButton": {
17 mounted(){
18 console.log(this.$listeners);
19 //{click: ƒ}
20 },
21 template: `<div @click="$listeners.click()">点我</div>`
22 }
23 }
24 });
25 </script>
26 </body>
3.子组件想调用父组件的方法 $emit
1 <body>
2 <div id="app">
3 <!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
4 <!--<my-button @click.native="fn"></my-button>-->
5 <my-button @click="fn" @mouseup="fn"></my-button>
6 </div>
7 <script src="../01-vue-basic/code/node_modules/vue/dist/vue.js"></script>
8 <script>
9 // 组件通信 props $emit $attrs $listeners
10 /*
11 子如何传父
12 1 在子组件中调用$emit()方法发布一个事件
13 2 在父组件中提供一个在子组件内部发布的事件处理函数
14 3 在父组件订阅子组件内部发布的事件
15 */
16 let vm = new Vue({
17 el: "#app",
18 data: {
19 content: "点我"
20 },
21 methods:{
22 fn(num) {
23 console.log(num,"fn() is called");
24 }
25 },
26 components: {
27 "MyButton": {
28 mounted() {
29 console.log(this.$listeners);// 绑定所有的方法
30 },
31 template: `
32 <div>
33 <button @click="$listeners.click(123);">点我</button>
34 <button @click="$emit('click2',23)">点我</button>
35 <button @click="$listeners.click(123);" @mouseup="$listeners.mouseup(123);">点我</button>
36 <button v-on="$listeners" >点我</button>
37 </div>
38 `
39 }
40 }
41 });
42 </script>
43 </body>
vue组件通信（props,$emit,$attrs,$listeners）的更多相关文章
- Vue - 组件通信之$attrs、$listeners
前言 vue通信手段有很多种,props/emit.vuex.event bus.provide/inject 等.还有一种通信方式,那就是 $attrs 和 $listeners,之前早就听说这两个 ...
- vue 父子组件通信props/emit
props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...
- vue组件通信新姿势
在vue项目实际开发中我们经常会使用props和emit来进行子父组件的传值通信,父组件向子组件传递数据是通过prop传递的, 子组件传递数据给父组件是通过$emit触发事件来做到的.例如: Vue. ...
- 【Vue组件通信】props、$ref、$emit，组件传值
1.什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递.类似NET POST/GET参数传递. Vue基本的三种传递方式** (props.\(ref.\) ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- vue 组件通信
组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...
- VUE 组件通信总结
1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...
- vue组件通信那些事儿
一.说说通信 通信,简言之,交流信息.交流结束后,把信息放在哪里,这是一个值得思考的问题.vue中保存状态有2种方式,组件内的data属性和组件外的vuex的state属性. 1.用state的场景 ...
- vue组件通信&&v兄弟组件通信eventbus遇到的问题（多次触发、第一次不触发）
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
随机推荐
- mysql挖掘与探索------第一章（简介）
一.数据库简介: 1按照数据库发展时间,主要出现下面几个类型的数据库系统: a 网状型数据库 b 层次型数据库 c 关系型数据库 d 面向对象数据库 上面4中数据库系统中,关系型数据库使用最为广泛.面 ...
- [LC] 226. Invert Binary Tree
Invert a binary tree. Example: Input: 4 / \ 2 7 / \ / \ 1 3 6 9 Output: 4 / \ 7 2 / \ / \ 9 6 3 1 /* ...
- wios设置证书登陆
设置wios为密钥登陆set service ssh 'allow-root' set service ssh 'disable-password-authentication' //禁用密码登陆 s ...
- 配置Oracle10g即时客户端plsql的配置
看到网上有好多的Oracle客户端精简版本,但是这些都不是出自Oracle官方之手,难免可能会出现一些问题.经过我奋战一个小时终于搞定了这个 Oracle10g即时客户端 的配置了 1.先到Oracl ...
- Leetcode刷题记录 剑指offer
面试题3:数组中重复数字 # 使用set,时间复杂度O(n),空间复杂度O(n)class Solution(object): def findRepeatNumber(self, nums): &q ...
- Python---13面向对象编程
一.类和实例 面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法, ...
- hexo博客的学习笔记
这篇文章主要的作用是作为 .md文件打开,内部的格式为一个初学者对hexo以及markdown语法运用的笔记 1.Hexo的写文格式 最开始为文章的属性部分,以三横杠-开始,-结束.里面记录了文章的标 ...
- 看完这篇还不了解 Nginx，那我就哭了！
作者:蔷薇Nina www.cnblogs.com/wcwnina/p/8728391.html 想必大家一定听说过 Nginx,若没听说过它,那么一定听过它的"同行"Apache ...
- RocketMQ 零拷贝
一.零拷贝原理:Consumer 消费消息过程,使用了零拷贝,零拷贝包含以下两种方式: 1.使用 mmap + write 方式 (RocketMQ选择的方式:因为有小块数据传输的需求,效果会比 s ...
- Turn and Stun server · J
本文简介了Turnserver(Turn + Stun)服务器的搭建.Turnserver主要提供了stun服务,支撑NAT.防火墙穿透,turn服务器,支撑打洞失败时的数据中转.使用场景上类似于前端 ...