vue-utility-passresponse v1.3.0

vue-utility-passresponse

这个工具包,旨在帮助我们在 vue 组件中更加优雅地响应式地向上传递数据

this utility aim to help us pass response variable gracefully

Usage:

stage first:

npm i vue-utility-passresponse --save

stage second:

import vueUtilityPassResponse from 'vue-utility-passresponse'

Vue.sue(vueUtilityPassResponse)

Methods Introduction:

pd_passResponse(responseVariableName:string)=> Function

返回一个向名为responseVariableName的响应式变量传递值的函数

return a function pass value to response variable named responseVariableName

DEMO:

<template>
	<div>
        <div>
            this parent received number is {{receiveResponseVariable}}
    	</div>
        <!--method1: pass by prop-->
 		<childComponent :responseProp='pd_passResponse('receiveResponseVariable')'></childComponent>
    </div>
 </template>
<script>
    import childComponent from './childComponent.vue'
export default{
    name:'ParentComponent',
    components:{ childComponent },
    data(){
        return{
            receiveResponseVariable:0,
        }
    },
    provide(){
        return {
            //method2:pass by provide
            responseProvide: this.pd_passResponse('receiveResponseVariable')
        }
    }
}
</script>

<template>
  <button @click="handlePropClick">add by props</button>
  <button @click="handleInjectClick">add by inject</button>
  <div>children number is {{ testNumber }}</div>
</template>
<script>
  export default{
      name:'childComponet',
      props:['responseProp'],
      inject:['responseProvide],'
     	data(){
          return {
              testNumber:0
      	}
  	},
       methods:{
           handlePropClick(){
               let res = this.testNumber++
               this.responseProp(res)
           }
           handleInjectClick(){
               let res = this.testNumber++
               this.responseProvide(res)
           }
       }
  }
</script>