Vue 组件通信

最新推荐文章于 2024-03-22 15:57:07 发布

jujulanhai

最新推荐文章于 2024-03-22 15:57:07 发布

阅读量68

点赞数

本文链接：https://blog.csdn.net/jujulanhai/article/details/95389341

版权

父子组件通信

 父子组件通信(通过props实现)

 具体步骤:
  1. 在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上
     <Son :money = "money"/>
  2. 在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以使一个数组
        Vue.component('Son',{
          template: '#son',
          props: ['money']
        })
  3. 在子组件模板中，接收到的属性可以像全局变量一样直接使用
        <p>父亲给了我 {{ money }} 钱 </p>

案例:

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里是父组件 </h3>
      <hr>
      <Son :aa = "money"></Son>//aa为自定义
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是son组件 </h3>
      <p> 父亲给了我  {{ aa }}  钱  </p>
    </div>
  </template>
</body>

<script>
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: 100,
      }
    }
  })
  Vue.component('Son',{
    template: '#son',
    props: ['aa']          
  })

  new Vue({
    
  }).$mount('#app')
</script>

子父组件通信

子父通信流程
       1. 在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件在子组件身上
           <Son @give = "fn"/>       //这边要注意： fn是要在父组件配置项methods中定义
       2. 在子组件的配置项methods中写一个事件处理程序，在事件处理程序中触发父组件绑定的自定义事件
         Vue.component('Son',{
           template: '#son',
           data () {
             return {
               hongbao: 666
             }
           },
           methods: {
             giveFather () {
               //如何进行父组件给子组件的自定义事件触发
               this.$emit('give',this.hongbao)
             }
           }
         })
       3. 将子组件定义的事件处理程序  giveFather,绑定在子组件的按钮身上
          <template id="son">
             <div>
               <button @click = "givefather"> give </button>
               <h3> 这里是son组件 </h3>
             </div>
           </template>
例：
  <body>
   <div id="app">
   <Father></Father>
   </div>

   <template id = 'father'>
     <div>
         <h3>这里是father组件</h3>
         <p>儿子给了我{{money}}元</p>
         <Son @give ="getHongbao"></Son>
     </div>
   </template>
   <template id = 'son'>
       <div>
           <button @click="givefather"> give </button>
           <h3>这里是son组件</h3>
       </div>
   </template>
 </body>

 <script>
  Vue.component('Father',{
      template: '#father',
      data(){
          return{
              money :0
          }
      },
   methods :{
       getHongbao( val ){
       this.money =val
       }
   }
  })

  Vue.component('Son',{
      template: '#son',
      data(){
          return {
              hongbao :666
          }
      },
      methods:{
          givefather(){//用emit进行事件的触发
         this.$emit('give',this.hongbao)
          }
      }
  })

   new Vue({
       el: '#app'
   })
 </script>

非父子组件通信

 实质就是一个子组件把数据传给他的父组件，父组件再将数据传给另一个子组件

 例：
 <body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <!-- 组件中根元素必须唯一 -->
    <div>
      <h3> 这里是father  </h3>
      <button @click = "look"> 点击查看father的this </button>
      <p> father的 n: {{ n }} </p>
      <hr>
      <Son ref = "son"></Son>
      <Girl ref = "girl" :n = "n"></Girl>
    </div>
  </template>

  <template id="son">
    <div>
      <h3> 这里是 son 1 </h3>
    </div>
  </template>

  <template id="girl">
      <div>
        <h3> 这里是girl </h3>
        <button @click = "out"> 输出girl的this </button>
      </div>
  </template>
</body>
<script>
  /* 
  通过ref绑定组件后，我们发现在他们的共同父组件的 $refs里面可以找到子组件
 */
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        n: 0
      }
    },
    methods: {
      look () {
        this.n = this.$refs.son.money 
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        money: 1000
      }
    }
  })

  Vue.component('Girl',{
    template: '#girl',
    data () {
      return {
        num: 0
      }
    },
    methods: {
      out () {
        console.log( this )
        console.log( this.$attrs )
      }
    }
  })

  new Vue({
    el: '#app'
  })
</script>

##动态组件

 1：什么是动态组件？
    动态组件是可以改变的组件

 2：动态组件如何使用？
    通过Vue提供了一个 component + is 属性

 案例：
 <body>
 <div id="app">
   <button @click = "change"> 切换 </button>
   <keep-alive include="">
     <component :is = "type"></component>
   </keep-alive>
   <component :is = "type"></component>
 </div>
</body>

<script>
/* 
 功能：点击一个按钮进行两个组件的切换
*/
 Vue.component('Aa',{
   template: '<div> Aa </div>'
 })

 Vue.component('Bb',{
   template: '<div> Bb </div>'
 })

 new Vue({
   data: {
     type: 'Aa'
   },
   methods: {
     change () {
       this.type = (this.type === 'Aa'?'Bb':'Aa')
     }
   }
 }).$mount('#app')
</script>