通过实例讲解vue组件之间的传值

Mora ·

更新时间:2024-09-20

· 225 次阅读

前言

1.父组件向子组件进行传值

2.子组件向父组件进行传值

3.非父子组件之间的传值

总结

前言

目前在做vue的项目，用到了子组件依赖其父组件的数据，进行子组件的相关请求和页面数据展示，父组件渲染需要子组件通知更新父组件的state，父子组件之间的传值一般有三种方法：

父传子

子传父

非父子传值

注意：

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

接下来，我们会通过实例代码来看的更清晰，理解更容易：

1.父组件向子组件进行传值

父组件代码：

<template>
  <div>
    父组件：
    <el-input v-model="val" style="width:300px" />
    <child :value="val" />
  </div>
</template>
  <script>
  import child from './child.vue'
  export default {
    name: 'Parent',
    data() {
      return {
        val: '我是父组件'
      }
    },
    components: {
      child
    },
  }
  </script>

子组件代码：

<template>
    <div class="child">
        子组件： {{  value  }}
    </div>
</template>
  <script>
export default {
    name: 'App',
    data() {
        return {
        }
    },
    props: ['value']
}
</script>
  <style scoped>
  .child {
      margin-top: 20px;
  }
  </style>

2.子组件向父组件进行传值

父组件代码

<template>
  <div>
    父组件：
    <el-input v-model="val" style="width:300px" />
    <child :value="val" @bindMsg='msgFun' />
  </div>
</template>
  <script>
  import child from './child.vue'
  export default {
    name: 'Parent',
    data() {
      return {
        val: '我是父组件'
      }
    },
    components: {
      child
    },
    methods: {
      msgFun(childVal) {
        console.log(childVal,'childVal')
        this.val = childVal
      }
    }
  }
  </script>

子组件代码

<template>
    <div class="child">
        子组件： {{  value  }}
        <el-button @click="$emit('bindMsg', '我是子组件')">点击改变父组建数据</el-button>
    </div>
</template>
  <script>
export default {
    name: 'App',
    data() {
        return {
        }
    },
    props: ['value'],
}
</script>
  <style scoped>
  .child {
      margin-top: 20px;
  }
  </style>

3.非父子组件之间的传值

.sync可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据

ref绑定在子组件上，引用的指向就是子组件的实例，父组件可以通过 ref 主动获取子组件的属性或者调用子组件的方法

父组件代码

<template>
  <div>
    父组件：
    <el-input v-model="val" style="width:300px" />
    <el-button @click="childRefClick">父组件ref点击</el-button>
    <child :value="val" @bindMsg='msgFun' :data.sync='data' ref='child' />
  </div>
</template>
  <script>
  import child from './child.vue'
  export default {
    name: 'Parent',
    data() {
      return {
        val: '我是父组件',
        data: ''
      }
    },
    components: {
      child
    },
    methods: {
      msgFun(childVal) {
        console.log(childVal, 'childVal')
        this.val = childVal;
      },
      childRefClick() {
        //ref获取子组件实例的属性和方法
        const child = this.$refs.child
        console.log(child.name)
        child.childBtnClick("调用了子组件的方法")
      }
    }
  }
  </script>

子组件代码

<template>
    <div class="child">
        子组件： {{  value  }}
        <el-button @click="childBtnClick">点击改变父组建数据</el-button>
    </div>
</template>
  <script>
export default {
    name: 'App',
    data() {
        return {
            currenData: {}
        }
    },
    props: ['value', 'data'],
    methods: {
        childBtnClick(val) {
            console.log(val,'val')
            this.$emit('bindMsg', val || '我是子组件')
        },
    },
}
</script>
  <style scoped>
  .child {
      margin-top: 20px;
  }
  </style>

非父子组件之间的传值方式还有slot插槽，vuex数据状态管理器等等

总结

主要用到了父子组件的传值，props，$emit，ref，sync等方法，父子组件之间的传值，十分常见，只要我们用会了组件之间的传数据的方法，对于前端的组件抽离，性能提升都有很大的好处。

到此这篇关于vue组件之间的传值的文章就介绍到这了,更多相关vue组件间传值内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE

1024 个赞