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 ...
随机推荐
- 【Java集合】试读ArrayList源码
ArrayList简介 ArrayList 是一个数组队列,相当于 动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List, RandomAccess, ...
- cs231n spring 2017 lecture6 Training Neural Networks I
1. 激活函数: 1)Sigmoid,σ(x)=1/(1+e-x).把输出压缩在(0,1)之间.几个问题:(a)x比较大或者比较小(比如10,-10),sigmoid的曲线很平缓,导数为0,在用链式法 ...
- 企业框架-Spring
1.什么是Spring Spring是最受欢迎的企业级Java应用程序开发框架,数以百万的来自世界各地的开发人员使用Spring框架来创建性能好.易于测试.可重用的代码. Spring框架是一个开源的 ...
- Qt QImage的浅拷贝与深拷贝
首先简单说说什么是浅拷贝和深拷贝:浅拷贝就比如像引用类型,而深拷贝就比如值类型,即浅拷贝是共用一块内存的,而深拷贝是复制一份内容. 我们再来看看QImage类的几个构造函数: // 浅拷贝 QImag ...
- SHELL用法二（练习）
1.SHELL编程作业&剖析演练 1)SHELL编程Nginx虚拟主机脚本: 安装Nginx WEB平台: 配置虚拟主机(1个网站): 重启&加载配置文件: 配置hos ...
- 关于Angular2与蚂蚁的NG-ZOORO一同开发时[disabled]="true"动态绑定失效的解决方法
在使用Angular2与蚂蚁的NG-ZOORO一同开发时,当我们的表单使用的是formControlName="value"时[disabled]="true" ...
- S2SH项目实现分页功能
javaWEB项目实现分页的方法很多,网上也有很多列子,最近工作中S2SH框架项目中需要一个分页的功能,查看了很多用一下方式实现,功能思路很清晰,觉得是很好的一种实现方法,记录下便多学习. 刚开始得到 ...
- tomcat启动后access error[730048]的解决方法
安装了JDK... 配置了系统变量... 解压了tomcat... 配置了系统变量... 点击startup.bat启动了以后,打开浏览器,出现access error 404错误. 仔细看过控制台输 ...
- python保留2位小数
1 代码: 2 运行结果: 3 其中字符串形式的:print('%.2f' % (x/y))方式最好
- 初识JS之数据类型
JavaScript JavaScript引入方式 Script标签内写代码 <script> // 在这里写你的JS代码 </script> 引入额外的JS文件 <sc ...