vue笔记-组件间传值

一 父组件向子组件传值

// 父组件
<template>
  <div id="app">
    <Son1 :info="son1Info"></Son1>
  </div>
</template>
<script>
import son1 from '@/components/son1'

export default {
  name: 'App',
  components: {
    'Son1': son1
  },
  data() {
    return {
      son1Info: {
        msg: 'from father'
      }
    }
  }
}
</script>

// 子组件
<template>
  <div class="son1">
    {{info.msg}}
  </div>
</template>

<script>
export default {
  name: 'son1',
  props: ['info']
}
</script>

二 子组件向父组件传值

// 父组件
<template>
  <div id="app">
    <Son1 @transfer="handleTransfer"></Son1> // 定义自定义事件
    <p>{{son1msg}}</p>
  </div>
</template>
<script>
import son1 from '@/components/son1'

export default {
  name: 'App',
  components: {
    'Son1': son1
  },
  data() {
    return {
      son1msg: ''
    }
  },
  methods: {
    handleTransfer(val) {
      this.son1msg = val
    }
  }
}
</script>

// 子组件
<template>
  <div class="son1">
    <button @click="handleClick">向父组件传值</button>
  </div>
</template>

<script>
export default {
  name: 'son1',
  methods: {
    handleClick() {
      this.$emit('transfer', 'from son1') // 通过Vue的原型方法$emit方法出发自定义事件，并传递参数
    }
  }
}
</script>

原理：

• 父组件中使用子组件并在子组件上绑定自定义事件
• 子组件通过Vue的原型方法$emit方法触发自定义事件，并传递参数
• 父组件中绑定的自定义事件处理函数执行，通过参数拿到子组件中传递过来的值，进行其他处理

三 兄弟组件（或不存在父子关系的组件）传值

// 父组件
<template>
  <div id="app">
    <Son1></Son1>
    <Son2></Son2>
  </div>
</template>
<script>
import son1 from '@/components/son1'
import son2 from '@/components/son2'

export default {
  name: 'App',
  components: {
    'Son1': son1,
    'Son2': son2
  }
}
</script>

// eventBus.js
import Vue from 'vue'

export default new Vue()

// son1组件
<template>
  <div class="son1">
    this is son1
    <button @click="handleClick">向兄弟组件son2传值</button>
  </div>
</template>

<script>
import EventBus from '@/eventBus'

export default {
  name: 'son1',
  methods: {
    handleClick() {
      EventBus.$emit('transferByBus', 'from son1')
    }
  }
}
</script>
// son2组件
<template>
  <div class="son2">
    this is son2
    {{fromEmit}}
  </div>
</template>
<script>
import EventBus from '@/eventBus'

export default {
  name: 'son2',
  data() {
    return {
      fromEmit: ''
    }
  },
  methods: {
    getEmitData() {
      const me = this
      EventBus.$on('transferByBus', (val) => {
        me.fromEmit = val
      })
    }
  },
  created() {
    this.getEmitData()
  }
}
</script>

原理：

• 定义一个新的vue实例（这里我们称为eventBus）
• 传值组件son1中引入eventBus，通过该Vue实例继承的原型方法$emit发送自定义事件transferByBus
• 接受值组件son2中引入eventBus，在钩子函数中注册eventBus实例监听transferByBus事件的方法
• 在监听方法中取得son1传递过来的值进行后续处理（这里注意this指向问题，在自定义事件监听函数中的this指向eventBus这个Vue实例）

四 父子组件某些数据进行双向绑定

// 父组件
<template>
  <div id="app">
    父组件的data：{{data}}
    <Son1 v-model="data"></Son1>
  </div>
</template>
<script>
import son1 from '@/components/son1'

export default {
  name: 'App',
  data() {
    return {
      data: 0
    }
  },
  components: {
    'Son1': son1
  }
}
</script>

// 子组件
<template>
  <div class="son1">
    <button @click="handleClick">data + 1</button>
    子组件中的data：{{data}}
  </div>
</template>

<script>
export default {
  name: 'son1',
  props: {
    value: {
      type: Number
    }
  },
  data() {
    return {
      data: this.value
    }
  },
  watch: {
    value(val) {
      this.data = val
    }
  },
  methods: {
    handleClick() {
      this.$emit('input', this.value + 1)
    }
  }
}
</script>

原理：

• 父组件中通过v-model绑定子组件父组件中的一个data属性
• 子组件接收一个名为‘value’的属性
• 子组件中data属性的一个值初始值设置为value的值
• 子组件中methods方法中触发‘input’事件，同时传递参数，此时父组件就会接收这个参数并更新v-model绑定的data属性。但是此时子组件son1中的data不会更新
• 子组件中watch ‘value’的变化并更新自身的data

以上就是vue本身支持的组件之间传递信息的方法，如果项目比较复杂，组件依赖较为复杂，则上述这些方法就显得力不从心了，我们可以借助vuex来统一管理项目中的共享状态。