前言

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

  1. 父传子
  2. 子传父
  3. 非父子传值

注意：

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

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

目录

前言

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

父组件代码：

子组件代码：

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

父组件代码

子组件代码

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

​编辑

父组件代码

子组件代码

总结

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

父组件代码：

      父组件：                import child from './child.vue'    export default {    name: 'Parent',    data() {      return {        val: '我是父组件'      }    },    components: {      child    },    }

子组件代码：

            子组件： {{  value  }}        export default {    name: 'App',    data() {        return {        }    },    props: ['value']}    .child {      margin-top: 20px;  }

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

父组件代码

      父组件：                import child from './child.vue'    export default {    name: 'Parent',    data() {      return {        val: '我是父组件'      }    },    components: {      child    },    methods: {      msgFun(childVal) {        console.log(childVal,'childVal')        this.val = childVal      }    }    }

子组件代码

            子组件： {{  value  }}        点击改变父组建数据        export default {    name: 'App',    data() {        return {        }    },    props: ['value'],  }    .child {      margin-top: 20px;  }

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

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

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

父组件代码

      父组件：        父组件ref点击              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("调用了子组件的方法")      }    }    }

子组件代码

            子组件： {{  value  }}        点击改变父组建数据        export default {    name: 'App',    data() {        return {            currenData: {}        }    },    props: ['value', 'data'],    methods: {        childBtnClick(val) {            console.log(val,'val')            this.$emit('bindMsg', val || '我是子组件')        },        },}    .child {      margin-top: 20px;  }

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

总结

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