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 ...
随机推荐
- git 代理配置方式
# 设置ss git config --global http.proxy 'socks5://127.0.0.1:1080' git config --global https.proxy 'soc ...
- generate的使用verilog
根据项目设计的需要,要实例化多个类似的模块,这些类似的模块包括方波波形发生器,这几个模块基本相同,除了参数传递值不同,其他他部分都是相同的 具体实现代码如下: 此外有计数模块的例化,这个模块例化多个的 ...
- 密码子演化假说|凝固事件假说|立体化学假说|共进化假说|代谢途径相关性假说|四重兼并|假四重兼并|最小损伤原则|AU-rich|GC-rich|逐步进化假说|分子机制进化假说
生命组学 将密码子表重排后发现,嘌呤嘧啶含量不同,密码子的氨基酸种类由第一二位决定,同时第三位变化大却没有蛋白质层面上实质性的改变,这说明第三位氨基酸是用于维持氨基酸组成不发生变化同时保证蛋白质稳定性 ...
- linux上hosts文件如何配置
linux上hosts文件如何配置 一.什么是host Hosts是一个没有扩展名的系统文件,其基本作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中输入一个需要登 ...
- 《hdu 4540 威威猫打地鼠》
威威猫系列故事——打地鼠 Time Limit: 300/100 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total ...
- 使用Rancher pipeline搭建基于容器的CICD
CICD概述 CI-持续集成(Continuous Integration):频繁地将代码集成到主干的一种开发实践,每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错 ...
- printf 输出浮点数
在测试printf函数输出结果时,写了如下代码: /** * printf:格式化输出函数 * printf函数不会按照格式控制而对数据类型进行转换,不管三七二十一, * 抓到二进制数据就按照格式控制 ...
- HashMap的四种遍历！
HashMap的四种遍历 import java.util.Collection; import java.util.HashMap; import java.util.Map; import jav ...
- Spring Security基本原理
近期研究了Spring Security,现进行记录. 首先先进行一个最简单的demo.默认情况下,在Spring Boot里,如果在classpath下面有Spring Security相关的jar ...
- Struts2获取request的几种方式汇总
Struts2获取request三种方法 struts2里面有三种方法可以获取request,最好使用ServletRequestAware接口通过IOC机制注入Request对象. 在Action中 ...