Vue 父子组件传值

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

Vue 作为一个轻量级的前端框架，其核心就是组件化开发。Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。

但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。本文讲解一下 Vue 项目中必有用的父子组件之间的传值方式

props 和 $emit

父组件传值给子组件，子组件使用props进行接收

父组件嵌套的子组件中，使用 v-bind 进行对象的绑定，子组件中通过定义 props 接收对应的msg 对象

父组件代码

<template>
  <div>
    <my-child v-bind:info="'parent value'" ></my-child>
    // v-bind 可省略 --> <my-child :info="'parent value'" ></my-child>
  </div>
</template>
 
<script>
// 引入子组件
import MyChild from './Child'
export default {
  data () {
    return {
      info: ''
    }
  },
  components: {
    MyChild,
  },
  methods: {
    getChild(val) {
        this.info = val
    },
  }
}
</script>

子组件代码

<template>
  <div>
    <p>{{info}}</p>
  </div>
</template>
 
<script>
export default {
  // 这里接收父组件传递的参数
  props: {
    info: {
      type: String,
      default: '--'
    },
  },
}
</script>

子组件传值给父组件，子组件使用 $emit 传递事件给父组件，父组件监听该事件

子组件代码　

<template>
  <div>
    <button @click="update()"></button>
  </div>
</template>


<script>
export default {
  methods: {
    data () {
      return {
        info: '这里是子组件通过$emit传递给父组件的值'
      }
    },
    update() {
      this.$emit("updateInfo", info);
    }
  },
}
</script>

  父组件代码

<template>
  <div>
    <my-child :info="'a value'" @updateInfo='getChild' ref='child'></my-child>
  </div>
</template>
 
<script>
// 引入子组件
import MyChild from './Child'
export default {
  data () {
    return {
      info: ''
    }
  },
  components: {
    MyChild,
  },
  methods: {
    getChild(val) {
      this.info = val
    },
  },
}
</script>

$parent 和 children

使用$parent获取到父组件实例，然后再获取数据对象

子组件代码　

<template>
  <div>
    {{info}}
    <button @click="update()"></button>
  </div>
</template>


<script>
export default {
  methods: {
    data () {
      return {
        info: '这里是子组件传递给父组件的值'
      }
    },
    getInfo() {
      return this.info
    },
    update() {
      this.$emit("updateInfo", info);
    }
  },
}
</script>

父组件代码

 <template>
  <div>
    parent
    <my-child :info="'parent value'" ref='child'></my-child>
  </div>
</template>
 
<script>
// 引入子组件
import MyChild from './Child'
export default {
  data () {
    return {
      info: ''
    }
  },
  components: {
    MyChild,
  },
  mounted () {
    // 获取自组件 Info
    this.info = this.$children[0].info 
    // 调用子组件方法 
    this.info = this.$children[0].getInfo()
    // 如果在这里直接修改子组件的方法，会有警告
  },
}
</script>

$children 获取子组件数据同理

$refs

使用 $ref 获取指定的子组件数据

<template>
  <div>
    <my-child :info="'parent value'" ref="child"></my-child>
  </div>
</template>
 
<script>
// 引入子组件
import MyChild from './Child'
export default {
  data () {
    return {
      info: ''
    }
  },
  components: {
    MyChild,
  },
  mounted () {
    // 通过 $ref 来访问子组件
    this.info = this.$refs.child.info 
    // 调用子组件方法 
    this.info = tthis.$refs.child.getInfo()
  },
}
</script>