vue通信方式

vue组件通信方式

使用props父传子

• 定义child组件

<template>
  <div>
      {{msg}}
  </div>
</template>
<script>
export default {
  name: 'propsChild',
  props: {
    msg: {
      type: String
    }
  }
}
</script>

• 父组件传值

  <template>
    <div id="app">
      <propsChild :msg="msg"/>
    </div>
  </template>
  <script>
  import PropsChild from './components/PropsChild'
  export default {
    components: {
      PropsChild
    },
    data () {
      return {
        msg: 'helloWorld'
      }
    }
  }
  </script>
  

使用inject和provide父传子

• 子组件接收用inject

<template>
  <div>
      {{name+price}}
  </div>
</template>

<script>
export default {
  name: 'injectChild',
  inject: {
    price: {
      default: 100
    },
    name: {
      default: 'u盘'
    }
  }
}

• 父组件传输用provide

  <template>
    <div id="app">
      <!-- <propsChild :msg="msg"/> -->
      <injectChild/>
    </div>
  </template>
  
  <script>
  // import PropsChild from './components/PropsChild'
  import InjectChild from './components/InjectChild'
  export default {
    components: {
      // PropsChild
      InjectChild
    },
    data () {
      return {
        // msg: 'helloWorld'
      }
    },
    provide: {
      name: '红烧牛肉面',
      price: 5
    }
  }
  </script>
  
  

利用props回调子传父

• 子组件

<template>
  <div @click="get(callbackmsg)">
    点我
      <!-- {{msg}} -->
  </div>
</template>

<script>
export default {
  name: 'propsChild',
  props: {
    msg: {
      type: String
    },
    get: {
      type: Function
    }
  },
  data () {
    return {
      callbackmsg: 1233
    }
  }
}
</script>

<style>
</style>

• 父组件

template>
  <div id="app">
    <!-- <propsChild :msg="msg"/> -->
    <!-- <injectChild/> -->
    <propsChild :get='get'/>
  </div>
</template>
export default {
  components: {
    PropsChild
    // InjectChild
  },
  data () {
    return {
      msg: 'helloWorld'
    }
  },
  methods: {
    get (data) {
      console.log(data)
    }
  },
}
</script>

通过$emit子传父

• 子组件

  <template>
    <div @click="childFun">
        点我
    </div>
  </template>
  
  <script>
  export default {
    name: 'emitChild',
    methods: {
      childFun () {
        this.$emit('parentFun', this.msg, '123')
      }
    },
    data () {
      return {
        msg: 'emit'
      }
    }
  }
  </script>
  

• 父组件

<template>
  <div id="app">
    <emitChild @parentFun='parentFun'/>
  </div>
</template>

<script>
import EmitChild from './components/EmitChild'
export default {
  components: {
    EmitChild
  },
  data () {
    return {
      msg: 'helloWorld'
    }
  },
  methods: {
    parentFun (data, value) {
      console.log(data, value)
    },
  }
}
</script>

使用parent父子组件互相传值

• 子组件

  <template>
    <div>
        {{parentmsg}}
    </div>
  </template>
  
  <script>
  export default {
    name: 'child',
    data () {
      return {
        childmsg: 'childmsg',
        parentmsg: this.$parent.parentmsg
      }
    }
  }
  </script>
  

• 父组件

  <template>
    <div id="app">
     <child/>
     <button @click='changeChildmsg'>点我</button>
    </div>
  </template>
  <script>
  import Child from './components/child'
  export default {
    components: {
      Child
    },
    data () {
      return {
        parentmsg: 'parentmsg',
        msg: 'helloWorld'
      }
    },
    methods: {
      changeChildmsg () {
        console.log(this.$children)
        this.$children[0].parentmsg = 'hello'
      }
    }
  }
  </script>
  

使用ref/$refs

• 子组件

<template>
  <div>2313</div>
</template>

<script>
export default {
  name: 'refChild',
  data () {
    return {
      msg: 'refchild'
    }
  }
}
</script>

• 父组件

  <template>
    <div id="app">
     <refChild ref='child'/>
    </div>
  </template>
  
  <script>
  import RefChild from './components/RefChild'
  export default {
    components: {
      RefChild
    },
    mounted () {
      console.log(this.$refs.child.msg)
    },
  }
  </script>
  
  

eventbus

• eventbus

  import Vue from 'vue'
  export const EventBus = new Vue()
  

• 第一个组件

  <template>
    <div @click="handleClick">
        点我eventbus
    </div>
  </template>
  
  <script>
  import { EventBus } from '../util/EventBus'
  console.log(EventBus)
  export default {
    name: 'eventBusOne',
    data () {
      return {
        msg: 'eventbusone'
      }
    },
    methods: {
      handleClick () {
        EventBus.$emit('send', { 'msg': this.msg })
      }
    }
  }
  </script>
  

<template>
  <div >msg是{{msg}}</div>
</template>

<script>
import { EventBus } from '../util/EventBus'
export default {
  name: 'eventBusTwo',
  data () {
    return {
      msg: 'msg'
    }
  },
  mounted () {
    EventBus.$on('send', value => {
      this.msg = value
    })
  },
  methods: {
    receive (data) {
      console.log(data)
    }
  }
}
</script>

• 父组件

  <template>
    <div id="app">
      <eventBusOne/>
      <eventBusTwo/>
    </div>
  </template>
  
  <script>
  import EventBusOne from './components/EventBusOne'
  import EventBusTwo from './components/EventBusTwo'
  export default {
    components: {
      EventBusOne,
      EventBusTwo
    }
  }
  </script>
  
  

listeners

• App父组件

  <template>
    <div id="app">
    <oneAttrs
    name='qw'
    job='student'
    age='22'/>
    </div>
  </template>
  
  <script>
  import OneAttrs from './components/oneAttrs'
  export default {
    components: {
      OneAttrs
    },
  }
  </script>
  
  

• 子组件oneAttrs

  <template>
    <div>
      {{ name+age+job }}
      <twoAttrs v-bind="$attrs"/>
    </div>
  </template>
  
  <script>
  import TwoAttrs from './TwoAttrs'
  export default {
    name: 'oneAttrs',
    inheritAttrs: false,
    props: ['name', 'age'],
    components: {
      TwoAttrs
    }
  }
  </script>
  
  <style>
  
  </style>
  

• 子组件twoAttrs

  <template>
    <div>
      {{$attrs}}
    </div>
  </template>
  
  <script>
  export default {
    name: 'twoAttrs',
    inheritAttrs: false,
    created () {
      console.log(this.$attrs)
    }
  }
  </script>
  
  <style>
  
  </style>