VUE $attrs $parent $listeners provide inject

$attrs

$attrs 如果设置了props接收对应的数据，则$attrs中就没有相关数据

$parent

$parent.属性名 也可以直接获取到相关父组件中的数据

<div id="app">
 <Child msg='父组件中的数据'></Child>
</div>

<script src="./js/vue.js"></script>
<script>

 const Child = {
   template: `
     <div></div>
   `,
   
  //  props: {
    // msg: String,
  //  },

   created () {
     console.log(this.$attrs.msg)//父组件中的数据
     console.log(this.$parent.msg);//56

   }
 }

 const app = new Vue({
   el: "#app",
   data:{
     msg:'65'
   },
   components: {
     Child
   },
   
 })

$listeners

	如果我们没有绑定自定义事件，在对应的$listeners中有包含我们对应的事件函数，
调用该事件函数，可以实现对应的数据修改

子父通信

1 利用@自定义事件名监听自定义事件 在子组件中利用$emit触发自定义事件
  <Child @xxx="函数"/>

  this.$emit('xxx', "数据")
2 利用@自定义事件名监听自定义事件 在子组件中直接调用this.$listeners.自定义事件名("要修改的参数")
  <Child @xxx="函数"/>

  this.$listeners.xxx('数据')

3 如果仅仅是修改数据，可以直接
  this.$parent.数据 = 新的值

 <div id="app">
   <!-- <Child @change:msg="msg = $event"></Child> -->
   <Child ref="child" @change:msg="msg = $event"></Child>
   {{msg}}
 </div>
 <script src="./js/vue.js"></script>
 <script>

   const Child = {
     template: `
       <div>
         <button @click="changemsg">修改msg</button>  
       </div>
     `,
     
     methods: {
       changemsg () {
         console.log(this)
         this.$listeners['change:msg']('内容')
         // this.$emit('change:msg', '数据')
         // this.$parent.msg = "新的数据"
       }
     }
     
   }

   const app = new Vue({
     el: "#app",
     data: {
       msg: "父组件中的数据"
     }, 
     components: {
       Child
     },

     mounted () {
       // console.log(this.$refs.child.$listeners['change:msg']('145213532'))
     }
   })


 </script>

provide inject 后代组件共享祖先数据

 <div id="app">
    <Child1></Child1>
  </div>

  <script src="./js/vue.js"></script>
  <script>
    // 生成组件Child1Child1
    const Child1Child1 = {
      template: `
        <div>Child1的子组件Child1 - {{msg}}</div>
      `,
      inject: ['msg']
    }

    // 生成组件Child1Child2
    const Child1Child2 = {
      template: `
        <div>Child1的子组件Child2 - {{msg}}</div>
      `,
      inject: ['msg']
    }

    // 生成组件Child1
    const Child1 = {
      template: `
        <div>
          Child1 - {{msg}}
          <hr />
          <Child1Child1></Child1Child1>
          <Child1Child2></Child1Child2>
          
        </div>
      `,
      components: {
        Child1Child1,
        Child1Child2
      },
      inject: ['msg']
    }

    const app = new Vue({
      el: "#app",
      provide: {
        msg: "这个数据在所有的child组件中都能共享"
      },
      components: {
        Child1
      }
    })


  </script>