0
0

vue组件通信

父组件传值给子组件：props $parent

子组件传值给父组件：$emit $refs $children

$attrs 进行跨层级传值，比如，爷爷组件传值孙子组件

$listeners 孙子传值爷爷

slot 插槽传值

bus 任意组件传值

路由传参

vuex

==================================================================================================================================================

1，父组件传值子组件 props

子组件有时候需要接收来自父组件的数据，这时候就需要给子组件绑定props的值，

props表示期待的获取的数据

步骤：

1、创建父子组件

2、在子组件组件中添加props属性，值可以是数组或者对象形式，

  1.  // 子组件
  1.  components: {
  2.                     son:{
  3.                         template:'#s',
  4.                         // 1、props定义在子组件中，表示期望接收到的值
  5.                         // props中接收到的值，可以像data中的值一样自由调用
  6.                         props: ['txt'],
  7.                         data(){
  8.                             return{
  9.                                 msg:'我是子组件数据'
  10.                             }
  11.                         }
  12.                     }
  13.                 }

3、父组件给子组件传值

在调用子组件的地方 以组件自定义标签属性的方式传递数据

下图中实例的txt,就是上面props中添加的属性

  1.   <!--2、 在调用子组件的地方 以组件自定义标签属性的方式传递数据 -->
  2.             <!-- 直接属性名 = '具体的值 ，会把具体的值直接传过去，写死了' -->
  3.             <!-- <son txt='info'></son> -->
  4. ​
  5.             <!-- 动态绑定传递的数据 -->
  6.             <son v-bind:txt="info"></son>

此时，给子组件传递的值，在子组件模板中，可以像调用data数据一样调用

  1.  <!-- 子组件 模板 -->
  2.     <template id="s">
  3.         <div class="son">
  4.             {{msg}}
  5.             <!-- 3、子元素中调用props的值 -->
  6.             <h4>{{txt}}</h4>
  7.         </div>
  8.     </template>

示例：

  1.  <style>
  2.         .father{
  3.             width: 500px;
  4.             height: 400px;  
  5.             background-color: rgb(218, 105, 105);
  6.         }
  7. ​
  8.         .son{
  9.             width: 300px;
  10.             height: 200px;
  11.             background-color: rgb(112, 97, 97);
  12.             margin: 50px auto;
  13.         }
  14.     </style>
  15. </head>
  16. ​
  17. <body>
  18.     <div id ="app">
  19.         <father> </father>   
  20.     </div>
  21. ​
  22.     <!-- 父组件 模板 -->
  23.     <template id="f">
  24.         <div class="father">
  25.             {{msg}}
  26.             <!--2、 在调用子组件的地方 以组件自定义标签属性的方式传递数据 -->
  27.             <!-- 直接属性名 = '具体的值 ，会把具体的值直接传过去，写死了' -->
  28.             <!-- <son txt='info'></son> -->
  29. ​
  30.             <!-- 动态绑定传递的数据 -->
  31.             <son v-bind:txt="info"></son>
  32.         </div>
  33.     </template>
  34.     <!-- 子组件 模板 -->
  35.     <template id="s">
  36.         <div class="son">
  37.             {{msg}}
  38.             <!-- 3、子元素中调用props的值 -->
  39.             <h4>{{txt}}</h4>
  40.         </div>
  41.     </template>
  42. ​
  43.     <script>
  44.      //创建Vue实例,得到 ViewModel
  45.      var vm = new Vue({
  46.         el: '#app',
  47.         data: {},
  48.         methods: {},
  49.         // 父组件
  50.         components: {
  51.             father:{
  52.                 template:'#f',
  53.                 data(){
  54.                     return{
  55.                         msg:'我是父组件的数据',
  56.                         info:'我是父组件中即将传递给子组件的值'
  57.                     }
  58.                 },
  59.                 // 子组件
  60.                 components: {
  61.                     son:{
  62.                         template:'#s',
  63.                         // 1、props定义在子组件中，表示期望接收到的值
  64.                         // props中接收到的值，可以像data中的值一样自由调用
  65.                         props: ['txt'],
  66.                         data(){
  67.                             return{
  68.                                 msg:'我是子组件数据'
  69.                             }
  70.                         }
  71.                     }
  72.                 }
  73.             }
  74.         }
  75.      });
  76.     </script>
  77. </body>

结果：

2,子组件传值给父组件 $emit

  1. #子组件中
  2. this.$emit(‘event’,val);
  3. //$emit：实例方法，用来触发事件监听
  4. //参数
  5. event：自定义事件名称
  6. val：通过自定义事件传递的值(val为可选参数)
  7. #子组件主动触发事件监听 （抛）
  8. <button @click="go">向父组件传值</button>
  9. methods:{
  10.     go(){
  11.         this.$emit('自定义事件名'，事件传递的可选参数);
  12.     }
  13. }
  15. #父组件中接收自定义事件监听 （接）
  16. <component @自定义事件名='事件处理函数/fn'></component>
  17. methods:{
  18.     fn(v){
  19.         v//自定义事件传递的值，会作为fn的参数来传递
  20.     }
  21. }

1、编写父子组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="../lib/vue.js"></script>
  9. ​
  10.     <style>
  11.         .father{
  12.             width: 500px;
  13.             height: 400px;  
  14.             background-color: rgb(218, 105, 105);
  15.         }
  16. ​
  17.         .son{
  18.             width: 300px;
  19.             height: 200px;
  20.             background-color: rgb(112, 97, 97);
  21.             margin: 50px auto;
  22.         }
  23.     </style>
  24. </head>
  25. ​
  26. <body>
  27.     <div id ="app">
  28.         <father> </father>   
  29.     </div>
  30. ​
  31.     <!-- 父组件 模板 -->
  32.     <template id="f">
  33.         <div class="father">
  34.             {{msg}}
  35.             <son></son>
  36.         </div>
  37.     </template>
  38.     <!-- 子组件 模板 -->
  39.     <template id="s">
  40.         <div class="son">
  41.             {{msg}}
  42.         </div>
  43.     </template>
  44. ​
  45.     <script>
  46.      //创建Vue实例,得到 ViewModel
  47.      var vm = new Vue({
  48.         el: '#app',
  49.         data: {},
  50.         methods: {},
  51.         // 父组件
  52.         components: {
  53.             father:{
  54.                 template:'#f',
  55.                 data(){
  56.                     return{
  57.                         msg:'我是父组件的数据',
  58.                     }
  59.                 },
  60.                 // 子组件
  61.                 components: {
  62.                     son:{
  63.                         template:'#s',
  64.                         data(){
  65.                             return{
  66.                                 msg:'我是子组件数据',                         
  67.                                 info:'我是子组件将要传递个父组件的值'
  68.                             }
  69.                         }
  70.                     }
  71.                 }
  72.             }
  73.         }
  74.      });
  75.     </script>
  76. </body>
  77. ​
  78. </html>

2、在子组件模板中编写给父组件传值的按钮 绑定点击事件

  1. <!-- 子组件 模板 -->
  2.     <template id="s">
  3.         <div class="son">
  4.            <p>{{msg}}</p> 
  5. ​
  6.            #<!-- 1、子组件中添加一个给父组件传值的按钮 -->
  7.            <button @click='change'>给父组件传值</button>
  8. ​
  9.         </div>
  10.     </template>

3、编写子组件中传值的方法

  1.  // 子组件
  2.                 components: {
  3.                     son:{
  4.                         template:'#s',
  5.                         data(){
  6.                             return{
  7.                                 msg:'我是子组件数据',
  8.                                 info:'我是子组件将要传递个父组件的值'
  9.                             }
  10.                         },
  11.                         // 2、在子组件中添加方法，给父组件传值的方法
  12.                         methods:{
  13.                             
  14.                             change(){
  15.                                 this.$emit('to_father',this.info);
  16.                             }
  17.                         }
  18.                     }
  19.                 }

3、在父组件调用子组件的位置，监听自定义事件

  1.  <!-- 父组件 模板 -->
  2.     <template id="f">
  3.         <div class="father">
  4.             {{msg}}
  5.             #<!-- 3、父组件接收传值  监听自定义的事件 执行对应函数 接下来编写函数-->
  6.             <son @to_father='accept_'></son>
  7.         </div>
  8.     </template>

4、父组件中编写监听事件对应的方法

  1.  methods:{
  2.                     accept_(v){
  3.                         console.log(v);
  4.                     }
  5.                 },

3,通过refs进行组件传值 子组件传值给父组件

1、ref 加在普通的元素上，用this.$refs.ref值 ， 获取到的是dom元素。

2、ref 加在子组件上，用this.$refs.ref值 ， 获取到的是组件实例，可以使用组件的所有方法、属性。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. ​
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. ​
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15. ​
  16.         html,
  17.         body,
  18.         #app {
  19.             width: 100%;
  20.             height: 100%;
  21.         }
  22. ​
  23.         .fatherBox {
  24.             width: 100%;
  25.             height: 100%;
  26.             background-color: rgb(253, 234, 234);
  27.             padding: 20px;
  28.             box-sizing: border-box;
  29.         }
  30. ​
  31.         .sonBox {
  32.             width: 50%;
  33.             height: 200px;
  34.             background-color: rgb(241, 209, 28);
  35.             padding: 20px;
  36.             box-sizing: border-box;
  37.             margin: 20px 0;
  38.         }
  39.     </style>
  40. </head>
  41. ​
  42. <body>
  43.     <div id="app">
  44.         <Father></Father>
  45.     </div>
  46. ​
  47.     <template id="father">
  48.         <div class="fatherBox">
  49.             <h2>欢迎来到父组件</h2>
  50.             <p>父组件将要接收子组件传递的值：{{msg}}</p>
  51.             <br>
  52. ​
  53.             <button @click="getRef">借助ref获取子组件的值</button>
  54.             <!-- ref 写在组件上 指向当前组件 可以获取到当前组件一切内容 -->
  55.             <Son ref="son"></Son>
  56. ​
  57.         </div>
  58.     </template>
  59. ​
  60.     <!--子组件模板 -->
  61.     <template id="son">
  62.         <div class="sonBox">
  63.             <h2>欢迎来到子组件</h2>
  64.             <p>将要孝敬爸爸的礼物：{{gift1}}</p>
  65.             <p>将要孝敬爸爸的礼物：{{gift2}}</p>
  66. ​
  67.         </div>
  68.     </template>
  69. </body>
  70. ​
  71. </html>
  72. <script src="./js/vue.js"></script>
  73. <script>
  74.     //创建Vue实例,得到 ViewModel
  75.     var vm = new Vue({
  76.         el: '#app',
  77.         data: {},
  78.         methods: {},
  79.         components: {
  80.             Father: {
  81.                 template: '#father',
  82.                 data() {
  83.                     return {
  84.                         msg: null,
  85. ​
  86.                     }
  87.                 },
  88.                 methods: {
  89.                     getRef() {
  90.                         console.log(this.$refs.son.gift1);
  91.                         this.msg = this.$refs.son.gift1;
  92.                     }
  93.                 },
  94.                 components: {
  95.                     Son: {
  96.                         template: '#son',
  97.                         data() {
  98.                             return {
  99.                                 gift1: '茅台',
  100.                                 gift2: '华子'
  101.                             }
  102.                         },
  103. ​
  104. ​
  105. ​
  106.                     }
  107.                 }
  108.             }
  109.         }
  110.     });
  111. </script>

4,通过$parent 进行父子传值

this.$parent，可以获取到当前组件的父组件实例，

即，可以直接调用使用父组件内的方法、属性、一切

例：

this.$parent.$parent.msg // 获取当前组件的父组件中的msg值

方法调用同理

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         html,
  17.         body,
  18.         #app {
  19.             width: 100%;
  20.             height: 100%;
  21.         }
  23.         .fatherBox {
  24.             width: 100%;
  25.             height: 100%;
  26.             background-color: rgb(253, 234, 234);
  27.             padding: 20px;
  28.             box-sizing: border-box;
  29.         }
  31.         .sonBox {
  32.             width: 50%;
  33.             height: 200px;
  34.             background-color: rgb(241, 209, 28);
  35.             padding: 20px;
  36.             box-sizing: border-box;
  37.             margin: 20px 0;
  38.         }
  39.     </style>
  40. </head>
  42. <body>
  43.     <div id="app">
  44.         <Father></Father>
  45.     </div>
  47.     <template id="father">
  48.         <div class="fatherBox">
  49.             <h2>欢迎来到父组件</h2>
  50.             <p>父组件将要接收子组件传递的值：{{msg}}</p>
  51.             <br>
  52.             <Son></Son>
  53.         </div>
  54.     </template>
  56.     <!--子组件模板 -->
  57.     <template id="son">
  58.         <div class="sonBox">
  59.             <h2>欢迎来到子组件</h2>
  60.             <p>将要获取父组件的内容：{{getFather}}</p>
  61.             <button @click="getParent">获取父组件</button>
  63.         </div>
  64.     </template>
  65. </body>
  67. </html>
  68. <script src="./js/vue.js"></script>
  69. <script>
  70.     //创建Vue实例,得到 ViewModel
  71.     var vm = new Vue({
  72.         el: '#app',
  73.         data: {
  74.             msg: 'app中的数据'
  75.         },
  76.         methods: {
  78.         },
  79.         components: {
  80.             Father: {
  81.                 template: '#father',
  82.                 data() {
  83.                     return {
  84.                         msg: '父组件的值',
  86.                     }
  87.                 },
  88.                 methods: {
  90.                 },
  91.                 components: {
  92.                     Son: {
  93.                         template: '#son',
  94.                         data() {
  95.                             return {
  96.                                 getFather: ''
  97.                             }
  98.                         },
  99.                         methods: {
  100.                             getParent() {
  101.                                 console.log(this);
  102.                                 //通过this.$parent 可以获取到整个父组件 把父组件的值 转存一下 就可以了
  103.                                 console.log(this.$parent);
  104.                                 console.log(this.$parent.msg);//父组件的值
  105.                                 this.getFather = this.$parent.msg;
  106.                             }
  107.                         }
  108.                     }
  109.                 }
  110.             }
  111.         }
  112.     });
  113. </script>

5,通过$children 进行子组件传值父组件

vm.$children可以获取到所有的子组件

以数组形式展现，可以通过下标获取对应组件的实例属性方法。。。

使用子传父： 父组件通过$children,获取到对应子组件的值，把值转存到自己的data中，完成传值

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>$children</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         html,
  16.         body,
  17.         #app {
  18.             width: 100%;
  19.             height: 100%;
  20.         }
  22.         .fatherBox {
  23.             width: 100%;
  24.             height: 100%;
  25.             background-color: rgb(253, 234, 234);
  26.             padding: 20px;
  27.             box-sizing: border-box;
  28.         }
  30.         .sonBox {
  31.             width: 50%;
  32.             height: 200px;
  33.             background-color: rgb(241, 209, 28);
  34.             padding: 20px;
  35.             box-sizing: border-box;
  36.             margin: 20px 0;
  37.         }
  38.     </style>
  39. </head>
  41. <body>
  42.     <div id="app">
  43.         <Father></Father>
  44.     </div>
  46.     <template id="father">
  47.         <div class="fatherBox">
  48.             <h1>Father组件</h1>
  49.             <p>Faher组件将要传递给子组件的值：{{msg}}</p>
  50.             <button @click="get">获取子组件值</button>
  51.             <Son></Son>
  53.         </div>
  54.     </template>
  56.     <template id="son">
  57.         <div class="sonBox">
  58.             <h1>Son组件</h1>
  59.             <p>son组件将要传给父组件的值：{{info}}</p>
  61.         </div>
  62.     </template>
  64. </body>
  66. </html>
  67. <script src="./js/vue.js"></script>
  68. <script>
  70.     let Son = {
  71.         template: "#son",
  72.         data() {
  73.             return {
  74.                 info: '孝敬爸爸的礼物'
  75.             }
  77.         }
  78.     }
  79.     let Father = {
  80.         template: '#father',
  81.         data() {
  82.             return {
  83.                 msg: ''
  84.             }
  85.         },
  86.         methods: {
  87.             get() {
  88.                 console.log('chufa');
  89.                 console.log(this.$children);//获取到所有的子组件  按下标取对应的子组件
  90.                 console.log(this.$children[0].info);
  91.                 this.msg = this.$children[0].info;
  92.             }
  93.         },
  94.         components: {
  95.             Son
  96.         }
  97.     }
  98.     //创建Vue实例,得到 ViewModel
  99.     var vm = new Vue({
  100.         el: '#app',
  101.         data: {},
  102.         methods: {},
  103.         components: {
  104.             Father
  105.         }
  106.     });
  107. </script>

利用watch监听，当子组件数据发生变化的时候，立马把值传递给父组件

思路： 监听子组件的数据，当变化的时候，利用this.$parent调用父组件获取子组件值的方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>$children</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         html,
  16.         body,
  17.         #app {
  18.             width: 100%;
  19.             height: 100%;
  20.         }
  22.         .fatherBox {
  23.             width: 100%;
  24.             height: 100%;
  25.             background-color: rgb(253, 234, 234);
  26.             padding: 20px;
  27.             box-sizing: border-box;
  28.         }
  30.         .sonBox {
  31.             width: 50%;
  32.             height: 200px;
  33.             background-color: rgb(241, 209, 28);
  34.             padding: 20px;
  35.             box-sizing: border-box;
  36.             margin: 20px 0;
  37.         }
  38.     </style>
  39. </head>
  41. <body>
  42.     <div id="app">
  43.         <Father></Father>
  44.     </div>
  46.     <template id="father">
  47.         <div class="fatherBox">
  48.             <h1>Father组件</h1>
  49.             <p>Faher组件将要传递给子组件的值：{{msg}}</p>
  50.             <button @click="get">获取子组件值</button>
  51.             <Son></Son>
  53.         </div>
  54.     </template>
  56.     <template id="son">
  57.         <div class="sonBox">
  58.             <h1>Son组件</h1>
  59.             <!-- 数据变化立马传递 -->
  60.             <input type="text" v-model="info">
  61.             <p>son组件将要传给父组件的值：{{info}}</p>
  63.         </div>
  64.     </template>
  66. </body>
  68. </html>
  69. <script src="./js/vue.js"></script>
  70. <script>
  72.     let Son = {
  73.         template: "#son",
  74.         data() {
  75.             return {
  76.                 info: '孝敬爸爸的礼物'
  77.             }
  79.         },
  80.         watch: {
  81.             //监听数据 发现变化了，立即调用父组件的获取子组件值的方法
  82.             info: {
  83.                 handler(newVal) {
  84.                     console.log('监听到了');
  85.                     console.log(this);
  86.                     console.log(this.$parent.get());
  87.                 },
  88.                   //立即监听
  89.                 immediate: true
  90.             }
  91.         }
  92.     }
  93.     let Father = {
  94.         template: '#father',
  95.         data() {
  96.             return {
  97.                 msg: ''
  98.             }
  99.         },
  100.         methods: {
  101.             get() {
  102.                 console.log('chufa');
  103.                 console.log(this.$children);//获取到所有的子组件  按下标取对应的子组件
  104.                 console.log(this.$children[0].info);
  105.                 this.msg = this.$children[0].info;
  106.             }
  107.         },
  108.         components: {
  109.             Son
  110.         }
  111.     }
  112.     //创建Vue实例,得到 ViewModel
  113.     var vm = new Vue({
  114.         el: '#app',
  115.         data: {},
  116.         methods: {},
  117.         components: {
  118.             Father
  119.         }
  120.     });
  121. </script>

6,vue2.6以后插入具名插槽不包含2.60！！！！！！！！

  1. 插口：
  2.   // <template v-slot:usb>
  3.    <template #usb>
  4.        <p>插入usb</p>
  5.        <p>哈哈哈，开心</p>
  6.    </template>
  7.  
  8.  插槽：
  9.   <slot name='usb'></slot>

7,$attrs进行爷孙传值

v-bind='$attrs'

个人理解： 爷爷传值给孙子 爸爸作为中介 如果爸爸拦截了（用props接收） 就传不到孙子那里了

  1. $attrs

是在vue的2.40版本以上添加的。是一个包含组件透传属性的对象

所谓的组件透传属性，就是非属性特性，透传给内部的子组件

作用：进行跨层级传值，比如，爷爷组件传值孙子组件

应用场景：爷爷组件传值孙子组件

传统的爷爷组件传值孙子组件，我们可以使用爷爷——> 爸爸——>孙子

即：爷爷组件传值给父组件，父组件接受后，再次传值给孙子组件

这样的方式可以完成，但是太过繁琐。我们可以利用$attrs进行

使用方式：

  • 爷爷组件把想要传递给孙子组件的值，通过自定义属性值的方式，即传统的正向传值方式，传递给父组件
  • 父组件可以通过props接受父组件想要的数据，父组件中没有使用props接受的值，可以通过$attrs传递给孙子组件
  • $attrs添加在父组件模板调用孙子组件的位置，给孙子组件添加v-bind='$attrs',
  • 孙子组件在自己的组件中，使用props，接收爷爷组件传递给父组件的值，（父组件没有用pros接收的值）

1、爷爷组件传递给父组件四个值

GrandFather.vue

  1. <template>
  2.   <div class="about">
  3.     <h1>about Page 爷爷组件</h1>
  4.     <p>爷爷组件传递给父组件的值1：{{ giveVal1 }}</p>
  5.     <p>爷爷组件传递给父组件的值2：{{ giveVal2 }}</p>
  6.     <p>爷爷组件传递给父组件的值3：{{ giveVal3 }}</p>
  7.     <p>爷爷组件传递给父组件的值4：{{ giveVal4 }}</p>
  8.     <!-- 引入父亲组件 Father -->
  9.     <Father
  10.       :giveVal1="giveVal1"
  11.       :giveVal2="giveVal2"
  12.       :giveVal3="giveVal2"
  13.       :giveVal4="giveVal2"
  14.     ></Father>
  15.   </div>
  16. </template>
  17. ​
  18. <script>
  19. import Father from "@/components/Father.vue";
  20. export default {
  21.   props: {},
  22.   data() {
  23.     return {
  24.       giveVal1: "传递的值1",
  25.       giveVal2: "传递的值2",
  26.       giveVal3: "传递的值3",
  27.       giveVal4: "传递的值4",
  28.     };
  29.   },
  30.   methods: {},
  31.   components: {
  32.     Child,
  33.   },
  34. };
  35. </script>
  36. ​
  37. <style scoped lang="less">
  38. .about {
  39.   width: 100%;
  40.   padding: 40px;
  41.   box-sizing: border-box;
  42.   background-color: rgb(248, 223, 223);
  43. }
  44. </style>
  45. ​

2、父组件接收一个，剩余的三个不接收

在调用孙子组件的位置，添加 

  1. v-bind='$attrs'

属性值

Father.vue

  1. <template>
  2.   <div class="fatherBox">
  3.     <h3>父亲组件</h3>
  4.     <p>通过props结收的值giveVal1:{{ giveVal1 }}</p>
  5.     <!-- 在子组件中 给调用孙子组件的位置 添加$attrs属性 -->
  6.     <GrandChild v-bind="$attrs"></GrandChild>
  7.   </div>
  8. </template>
  9. ​
  10. <script>
  11. import GrandChild from "@/components/GrandChild.vue";
  12. export default {
  13.   //不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性
  14.   inheritAttrs: false,
  15.   
  16.   props: {
  17.     giveVal1: {
  18.       type: String,
  19.     },
  20.   },
  21.   data() {
  22.     return {};
  23.   },
  24.   methods: {},
  25.   components: {
  26.     GrandChild,
  27.   },
  28. };
  29. </script>
  30. ​
  31. <style scoped lang="less">
  32. .fatherBox {
  33.   width: 80%;
  34.   padding: 20px;
  35.   box-sizing: border-box;
  36.   margin: 0 auto;
  37.   background-color: orange;
  38. }
  39. </style>
  1. ​

3、孙子组件使用props接收值

孙子组件使用props，接受爷爷组件传递的，没有被父组件的props接受的值

GrandChild.vue

  1. <template>
  2.   <div class="grandChildBox">
  3.     <h4>孙子组件</h4>
  4.     <p>孙子组件接收爷爷的值1：{{ giveVal1 }}</p>
  5.     <p>孙子组件接收爷爷的值2：{{ giveVal2 }}</p>
  6.     <p>孙子组件接收爷爷的值3：{{ giveVal3 }}</p>
  7.     <p>孙子组件接收爷爷的值4：{{ giveVal4 }}</p>
  8.   </div>
  9. </template>
  10. ​
  11. <script>
  12. export default {
  13.   props: {
  14.     giveVal1: {
  15.       type: String,
  16.     },
  17.     giveVal2: {
  18.       type: String,
  19.     },
  20.     giveVal3: {
  21.       type: String,
  22.     },
  23.     giveVal4: {
  24.       type: String,
  25.     },
  26.   },
  27.   data() {
  28.     return {};
  29.   },
  30.   methods: {},
  31.   components: {},
  32. };
  33. </script>
  34. ​
  35. <style scoped lang="less">
  36. .grandChildBox {
  37.   width: 80%;
  38.   padding: 20px;
  39.   box-sizing: border-box;
  40.   margin: 0 auto;
  41.   background-color: white;
  42. }
  43. </style>

4、核心原理

使用$attrs的核心，是爷爷组件传递给父亲组件的值，父亲组件如果没有使用props接受，则会作为一个dom属性显示在页面中。

也就是说，上面例子中，所有没有被父亲组件props接收的值，全部都作为了一个dom节点的属性值展示在页面中，如下图所示：

所以，父亲组件在调用孙子组件的位置，绑定的v-bind='$attrs'，其实就是把父组件自身所有的属性，正向传值给孙子组件

所以，孙子组件可以通过props接受父组件没有使用props接收的值。

那么问题来了

传值你随便传，能不能不要在页面显示父亲组件没有使用props接受的值呢，看起来太乱了

简单

在Father.vue组件的js位置，书写一个属性

8,$listeners 孙子传值爷爷

使用方法：

1、孙子组件自定义事件传值，传给上级组件

2、在父组件中 ，给调用孙子组件的位置 添加

  1. v-on="$listeners"

3、爷爷组件中，在调用父亲组件的位置，监听孙子组件的自定义事件，取值

1、孙子组件进行自定义事件传值

孙子组件使用自定义事件this.$emit传值给爷爷组件

GrandChild.vue组件

  1. <template>
  2.   <div class="grandChildBox">
  3.     <h4>孙子组件</h4>
  4.     <p>孙子组件将要传给爷爷的值：{{ gift }}</p>
  5.     <button @click="change">传值给爷爷</button>
  6.   </div>
  7. </template>
  8. ​
  9. <script>
  10. export default {
  11.   props: {},
  12.   data() {
  13.     return {
  14.       gift: "茅台",
  15.     };
  16.   },
  17.   methods: {
  18.     change() {
  19.       this.$emit("changeGift", this.gift);
  20.     },
  21.   },
  22.   components: {},
  23. };
  24. </script>
  25. ​
  26. <style scoped lang="less">
  27. .grandChildBox {
  28.   width: 80%;
  29.   padding: 20px;
  30.   box-sizing: border-box;
  31.   margin: 0 auto;
  32.   background-color: white;
  33. }
  34. </style>
  35. ​

2、父亲组件调用孙子组件的位置，添加v-on="$listeners"

在父组件中 给调用孙子组件的位置 添加v-on="$listeners"

Father.vue

  1. <template>
  2.   <div class="fatherBox">
  3.     <h3>父亲组件</h3>
  4.     <!-- 在父组件中 给调用孙子组件的位置 添加v-on="$listeners" -->
  5.     <GrandChild v-on="$listeners"></GrandChild>
  6.   </div>
  7. </template>
  8. ​
  9. <script>
  10. import GrandChild from "@/components/GrandChild.vue";
  11. export default {
  12.   props: {},
  13.   data() {
  14.     return {};
  15.   },
  16.   methods: {},
  17.   components: {
  18.     GrandChild,
  19.   },
  20. };
  21. </script>
  22. ​
  23. <style scoped lang="less">
  24. .fatherBox {
  25.   width: 80%;
  26.   padding: 20px;
  27.   box-sizing: border-box;
  28.   margin: 0 auto;
  29.   background-color: orange;
  30. }
  31. </style>
  1. ​

3、爷爷组件，监听自定义事件

爷爷组件，在调用父亲组件的位置，监听孙子组件的自定义事件，取值

GranderFater.vue

  1. <template>
  2.   <div class="about">
  3.     <h1>about Page 爷爷组件</h1>
  4.     <p>期待接收孙子的值：{{ gift }}</p>
  5.     <!-- 引入父亲组件 Father -->
  6.     <!-- 在爷爷组件引入父组件的位置，监听孙子组件的自定义事件 -->
  7.     <Father @changeGift="getVal"></Father>
  8.   </div>
  9. </template>
  10. ​
  11. <script>
  12. import Father from "@/components/Father.vue";
  13. export default {
  14.   props: {},
  15.   data() {
  16.     return {
  17.       gift: "",
  18.     };
  19.   },
  20.   methods: {
  21.     getVal(v) {
  22.       this.gift = v;
  23.     },
  24.   },
  25.   components: {
  26.     Father,
  27.   },
  28. };
  29. </script>
  30. ​
  31. <style scoped lang="less">
  32. .about {
  33.   width: 100%;
  34.   padding: 40px;
  35.   box-sizing: border-box;
  36.   background-color: rgb(248, 223, 223);
  37. }
  38. </style>
  39. ​

9,bus传值

bus可以用在任何组件之间的传值

举个例子，我们现在有A、B、C、D、E、F五个组件，其中，E和F是兄弟组件，D是EF的父亲、C是D的父亲，依次类推

如图：

如果我们在E组件中，使用bus完成一个组件的传值，那么E组件传递的值，在A、B、C、D、F任意一个组件中，都可以接收到，并且，可以同时接收。所以我们说，bus可以完成任意组件的传值

使用方法：

1、在main.js中全局挂载bus

2、在要传值的组件中，使用this.bus.$emit('自定义事件'，要传递的值)

3、在需要接收传值的组件中，mounted钩子函数中，使用this.bus.$on('自定义事件名'，(v)=>{v}) 接受传递的数据

我们先自定义6个组件完成如上图的嵌套

A.vue

  1. <template>
  2.   <div class="abox">
  3.     <h1>A组件，最外层的</h1>
  4.     <B></B>
  5.   </div>
  6. </template>
  7. ​
  8. <script>
  9. import B from "../components/B";
  10. export default {
  11.   props: {},
  12.   data() {
  13.     return {};
  14.   },
  15.   methods: {},
  16.   components: {
  17.     B,
  18.   },
  19. };
  20. </script>
  21. ​
  22. <style scoped lang="less">
  23. .abox {
  24.   width: 100%;
  25.   padding: 20px;
  26.   background-color: #e6ddcd;
  27.   color: white;
  28. }
  29. </style>
  30. ​

B.vue

  1. <template>
  2.   <div class="bbox">
  3.     <h2>B组件</h2>
  4.     <C></C>
  5.   </div>
  6. </template>
  7. ​
  8. <script>
  9. import C from "./C";
  10. export default {
  11.   props: {},
  12.   data() {
  13.     return {};
  14.   },
  15.   methods: {},
  16.   components: {
  17.     C,
  18.   },
  19. };
  20. </script>
  21. ​
  22. <style scoped lang="less">
  23. .bbox {
  24.   width: 80%;
  25.   margin: 20px auto;
  26.   padding: 20px;
  27.   color: white;
  28.   background-color: #c9b486;
  29. }
  30. </style>

C.vue

  1. <template>
  2.   <div class="cbox">
  3.     <h3>C组件</h3>
  4. ​
  5.     <D></D>
  6.   </div>
  7. </template>
  8. ​
  9. <script>
  10. import D from "./D";
  11. export default {
  12.   props: {},
  13.   data() {
  14.     return {};
  15.   },
  16.   methods: {},
  17.   components: {
  18.     D,
  19.   }
  20. };
  21. </script>
  22. ​
  23. <style scoped lang="less">
  24. .cbox {
  25.   width: 80%;
  26.   margin: 20px auto;
  27.   padding: 20px;
  28.   background-color: #2b6363;
  29. }
  30. </style>
  31. ​

D.vue

  1. <template>
  2.   <div class="dbox">
  3.     <h4>D组件</h4>
  4.     <E></E>
  5.     <F></F>
  6.   </div>
  7. </template>
  8. ​
  9. <script>
  10. import F from "./F";
  11. import E from "./E";
  12. export default {
  13.   props: {},
  14.   data() {
  15.     return {};
  16.   },
  17.   methods: {},
  18.   components: {
  19.     F,
  20.     E,
  21.   },
  22. };
  23. </script>
  24. ​
  25. <style scoped lang="less">
  26. .dbox {
  27.   width: 80%;
  28.   margin: 20px auto;
  29.   padding: 20px;
  30.   color: white;
  31.   background-color: #153547;
  32. }
  33. </style>
  34. ​

E.vue

  1. <template>
  2.   <div class="ebox">
  3.     <h5>E组件</h5>
  4.     
  5.   </div>
  6. </template>
  7. ​
  8. <script>
  9. export default {
  10.   props: {},
  11.   data() {
  12.     return {
  13.       egift: "E孝敬的茅台",
  14.     };
  15.   },
  16.   methods: {
  17.    
  18.   },
  19. ​
  20.   components: {},
  21. };
  22. </script>
  23. ​
  24. <style scoped lang="less">
  25. .ebox {
  26.   width: 80%;
  27.   margin: 20px auto;
  28.   padding: 20px;
  29.   color: white;
  30.   background-color: #071632;
  31. }
  32. </style>
  33. ​

F.vue

  1. <template>
  2.   <div class="ebox">
  3.     <h5>F组件</h5>
  4.   </div>
  5. </template>
  6. ​
  7. <script>
  8. export default {
  9.   props: {},
  10.   data() {
  11.     return {};
  12.   },
  13.   methods: {},
  14. ​
  15.   components: {},
  16.   mounted() {
  17.    
  18.   },
  19. };
  20. </script>
  21. ​
  22. <style scoped lang="less">
  23. .ebox {
  24.   width: 80%;
  25.   margin: 20px auto;
  26.   padding: 20px;
  27.   color: white;
  28.   background-color: #071632;
  29. }
  30. </style>
  31. ​

1、在main.js中全局挂载bus

  1. Vue.prototype.bus = new Vue();

main.js

  1. import Vue from 'vue'
  2. //import App from './App.vue'
  3. import A from '@/components/A.vue'
  5. import router from './router'
  6. ​
  7. Vue.config.productionTip = false
  8. ​
  9. //1、把bus属性 挂载在vue原型对象上
  10. Vue.prototype.bus = new Vue();
  11. ​
  12. ​
  13. ​
  14. new Vue({
  15.   router,
  16.   render: function (h) { return h(A) }
  17. }).$mount('#app')
  18. ​

2、在需要传递数据的组件中使用bus触发自定义事件

  1. this.bus.$emit('自定义事件名'，要传递的值)

此处以E.vue为例

  1. <template>
  2.   <div class="ebox">
  3.     <h5>E组件</h5>
  4.     <button @click="EChange">E要孝敬大家了</button>
  5.   </div>
  6. </template>
  7. ​
  8. <script>
  9. export default {
  10.   props: {},
  11.   data() {
  12.     return {
  13.       egift: "E孝敬的茅台",
  14.     };
  15.   },
  16.   methods: {
  17.     EChange() {
  18.       this.bus.$emit("ESend", this.egift);
  19.     },
  20.   },
  21. ​
  22.   components: {},
  23. };
  24. </script>
  25. ​
  26. <style scoped lang="less">
  27. .ebox {
  28.   width: 80%;
  29.   margin: 20px auto;
  30.   padding: 20px;
  31.   color: white;
  32.   background-color: #071632;
  33. }
  34. </style>
  35. ​

3、需要接收的组件接收，使用this.bus.$on('自定义事件名'，（）=>{v})

在需要结收的组件的mounted钩子函数中，使用bus监听通bus的自定义事件

  1. this.bus.$on('自定义事件名'，（）=>{v})

此处以A.vue组件为例

  1. <template>
  2.   <div class="abox">
  3.     <h1>A组件，最外层的</h1>
  4.     <B></B>
  5.   </div>
  6. </template>
  7. ​
  8. <script>
  9. import B from "../components/B";
  10. export default {
  11.   props: {},
  12.   data() {
  13.     return {};
  14.   },
  15.   methods: {},
  16.   components: {
  17.     B,
  18.   },
  19.   mounted() {
  20.     this.bus.$on("ESend", (v) => {
  21.       console.log("a接收E孝敬的：", v);
  22.     });
  23.   },
  24. };
  25. </script>
  26. ​
  27. <style scoped lang="less">
  28. .abox {
  29.   width: 100%;
  30.   padding: 20px;
  31.   background-color: #e6ddcd;
  32.   color: white;
  33. }
  34. </style>
  35. ​

在c组件，F组件中如法炮制，同样的写法

当我们触发E组件传值时，神奇的现象来了：

太厉害了，那么问题来了，是不是只能子组件通过bus传递给父组件和兄弟组件，

父组件可以通过这样的方法传递给子组件吗？？

注意！！！！！！！！！！！！！！！！

我们说，bus是什么？可以进行任意组件的传值，所以，答案是，没问题

自己写代码，测试一下

标签： vue.js 前端 javascript
本文转载自: https://blog.csdn.net/qq_46376192/article/details/128501853
版权归原作者 青青子衿越 所有， 如有侵权，请联系我们删除。
登录后发布评论

“vue组件通信”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。