vue组件传值--源码

一、子传父

子组件: 通过事件触发的方法, 在触发的方法中通过 this.$emit(“自定义监听事件”, 想要传递的数据) 向父组件传递数据。
父组件: 通过 @子组件的自定义监听事件=“新的方法名” 来获取子组件传递的数据。

父组件中的代码

<template>
    <div>
        <div>
             <p>这里是父组件</p>
             <p>接收到子组件的值为： {{sonValue}}</p>
        </div>
        <!-- 注意: 这里的test方法名后面不能带括号 -->
        <son @getSonValue="test"></son>
    </div>
</template>

<script>
  import son from './son'

  export default {
    name: 'father',
    components: {son},
    data () {
      return {
        sonValue: null,
        transmitData: '父组件传的值'
      }
    },
    methods: {
      test(val, event) {
        console.log('子传父--父组件', val)
        this.sonValue = val
      }
    }
  }
</script>

子组件中的代码

<template>
    <div>
        <div>
            <p>这里是子组件</p>
            <button @click="sonFather">点我向父组件传值</button>
    </div>
</template>

<script>
  export default {
    name: 'son',
    data () {
      return {
        sonValue: 'son要传递的值'
      }
    },
    methods: {
      sonFather () {
        console.log('子传父--子组件', this.sonValue)
        this.$emit(
          "getSonValue", {sonValue: this.sonValue}
        )
      }
    }
  }
</script>

二、父传子

使用方法:
父组件: 通过 :自定义属性名=“要传递的数据” 向子组件传递数据
子组件: 通过 props:[“相同的自定义属性名”] 来接收父组件传递的数据

父组件代码

<template>
    <div>
        <div>
            <p>这里是父组件</p>
            <button @click="fatherSon">点我向子组件传值</button>
        </div>
        <son :fatherValue=fatherValue></son>
    </div>
</template>

<script>
  import son from './son'

  export default {
    name: 'father',
    components: {son},
    data () {
      return {
        fatherValue: '父组件传的值'
      }
    },
    methods: {
      fatherSon() {
        console.log('父传子-父组件', this.fatherValue)
      }
    }
  }
</script>

子组件代码

<template>
    <div>
        <div>
            <p>这里是子组件</p>
            <p>接收父组件的值为: {{fatherValue2}}</p>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'son',
    props: [
      "fatherValue"
    ],
    data () {
      return {
        fatherValue2: ''
      }
    },
    created() {
        this.fatherValue2 = this.fatherValue
        console.log('created', this.fatherValue)
    },
    methods: {
      sonFather () {
        console.log('子传父--子组件', this.sonValue)
        this.$emit(
          "getSonValue", this.sonValue
        )
      }
    }
  }
</script>

---

20-09-30 更新:

三、兄弟组件传值

兄弟组件传值需要借助一个共同的事件机制, 我这里是创建了一个bus.js文件
1, 传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。接收数据方，通过mounted()触发bus.$on(方法名，(接收数据的参数)=> {用该组件的数据接收传递过来的数据})，最好使用箭头函数, 可能会发生this指向问题。

<!-- 父组件html部分 -->
<brother1></brother1>
<brother2></brother2>

// 父组件js部分
<script>
	// 注册组件
	import brother1 from './brother1'
    import brother2 from './brother2'
    export default {
        name: 'computedStudy',
        components: {brother2, brother1},
        data () {
            return {}
        },
        methods: {}
    }
</script>

// 子组件brother1
<template>
    <div @click="oneSon()">brother1</div>
</template>

<script>
    import bus from '../bus/bus'
    export default {
        name: 'brother1',
        data () {
          return {
              dataValue: 'xiongdiya, nihaoma',
              msg: '这是brogher1要传的值'
          }
        },
        methods: {
            oneSon () {
                bus.$emit('msg', this.msg)
            }
        }
    }
</script>

// 子组件brogher2
<template>
    <div>
        <p @click="twoSon">brother2{{btext}}</p>
    </div>
</template>

<script>
    import bus from '../bus/bus'
    export default {
        name: 'brother2',
        data () {
            return {
                btext: ''
            }
        },
        mounted() {
            this.twoSon()
        },
        methods: {
            twoSon(){
                bus.$on('msg', (message) => {
                    console.log('message', message)
                    this.btext = message
                })
            }
        }
    }
</script>

20-09-30 更新结束

---

我的demo都混合写在一起了, 上面父子传值是我拆出来的(便于梳理读懂), 下面贴上我的源码

父子传值混合代码(父组件)

<template>
    <div>
        <div>
            <p>这里是父组件</p>
            <p>接收到子组件的值为： {{sonValue}}</p>
            <button @click="fatherSon">点我向子组件传值</button>
        </div>
        ----------------------------------------------------------
        <son @getSonValue="test" :fatherValue=fatherValue></son>
    </div>
</template>

<script>
  import son from './son'

  export default {
    name: 'father',
    components: {son},
    data () {
      return {
        sonValue: null,
        fatherValue: '父组件传的值'
      }
    },
    methods: {
      fatherSon() {
        console.log('父传子-父组件', this.fatherValue)
      },
      test(val, event) {
        console.log('子传父--父组件', val)
        this.sonValue = val
      }
    }
  }
</script>

父子传值混合代码(子组件)

<template>
    <div>
        <div>
            <p>这里是子组件</p>
            <p>接收父组件的值为: {{fatherValue2}}</p>
            <button @click="sonFather">点我向父组件传值</button>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'son',
    props: [
      "fatherValue"
    ],
    data () {
      return {
        sonValue: 'son要传递的值',
        fatherValue2: ''
      }
    },
    created() {
        this.fatherValue2 = this.fatherValue
        console.log('created', this.fatherValue)
    },
    methods: {
      sonFather () {
        console.log('子传父--子组件', this.sonValue)
        this.$emit(
          "getSonValue", this.sonValue
        )
      }
    }
  }
</script>

最后贴上效果图 ↓

写给读者的话:
父子组件传值到这里告一段落, 至于其他的传值方式, 后续在更新。
本文仅作为自己参考, 帮到各位那是最好, 如内容有误, 欢迎评论区指正 ^_^