Vue深入-22【Vue2.0『数据传递』】

最新推荐文章于 2023-08-02 21:30:26 发布

可乐雪碧薄荷糖

最新推荐文章于 2023-08-02 21:30:26 发布

阅读量238

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/114195090

本文围绕Vue组件间的数据与事件传递展开，介绍了事件传递与值传递的多种方式，如emit、sync、v-model等；还提及跨越层级传递的$parent方法，以及扩展的$eventDispatch和广播事件.$eventBoardcast。此外，阐述了v-bind/$attrs、v-on/$listeners、provide-inject/ref和eventbus事件总线等传递方法，并给出总结与建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(1).事件传递与值传递

1.emit发送事件传递数据

Mother.vue

<template>
    <div>
        <h1>家庭资产{
  {fatherM}}</h1>
        <Father
            :fatherM = "fatherM"
            @earnMoney = "earnMoney"
        />
    </div>
</template>

<script>
import Father from './Father'
export default {
    name:'Mother',
    components:{
        Father
    },
    data(){
        return{
            fatherM:3000
        }
    },
    methods:{
        earnMoney(num){
            this.fatherM += num
        }
    }

}
</script>

<style>

</style>

Father.vue

<template>
  <div>
      <h2>父亲资产:{
  {fatherM}}</h2>
      <button @click="earnMoney">赚钱</button>
  </div>
</template>

<script>
export default {
    name:'Father',
    props:{
        fatherM:Number
    },
    methods:{
        earnMoney(){
            this.$emit('earnMoney',100)
        }
    }
}
</script>

<style>

</style>

2.sync绑定

@update:value="value => this.fatherM = value" 
value.sync="fatherM" 这是上面的语法糖,同时也实现了双向绑定

Father.vue

<template>
  <div>
      <h2>父亲资产:{
  {fatherM}}</h2>
      <button @click="earnMoney">赚钱</button>
      <button @click="invest">投资</button>
  </div>
</template>

<script>
export default {
    name:'Father',
    props:{
        fatherM:Number
    },
    methods:{
        earnMoney(){
            this.$emit('earnMoney',100)
        },
        invest(){
            this.$emit('update:value',1000)
        }
    }
}
</script>

<style>

</style>

mother.vue

<template>
    <div>
        <h1>家庭资产{
  {fatherM}}</h1>
        <Father
            :fatherM = "fatherM"
            @earnMoney = "earnMoney"
            :value.sync = "fatherM"
        />
    </div>
</template>

<script>
import Father from './Father'
export default {
    name:'Mother',
    components:{
        Father
    },
    data(){
        return{
            fatherM:3000
        }
    },
    methods:{
        earnMoney(num){
            this.fatherM += num
        }
    }

}
</script>

<style>

</style>

3.v-model绑定

<Father v-model="fatherM"/> 这是个语法糖，相当于
<Father :value="fatherM" @input="value => fatherM = value"/>

示例

father

<template>
  <div>
      <h2>父亲资产:{
  {value}}</h2>
      <input type="text" :value="value"  @input="onMyInput"/>
     
  </div>
</template>

<script>
 export default{
        name:'hello',
        props:['value'],
         methods:{
            onMyInput(e){
                this.$emit('input',e.target.value)
            }
        }
      
    }

</script>

<style>

</style>

mather

<template>
    <div>
        <h1>家庭资产{
  {fatherM}}</h1>
        <Father
           v-model="fatherM"
        />
    </div>
</template>

<script>
import Father from './Father'
export default {
    name:'Mother',
    components:{
        Father
    },
    data(){
        return{
            fatherM:3000
        }
    }

}
</script>

<style>

</style>