父子组件之间的传值-蒲公英云

父子组件之间的传值

你的名字 2023-06-20 11:58 101阅读 0赞

一、子组件向父组件传值

子组件通过this.$emit()的方式将值传递给父组件，父组件用函数的方式接收。
子组件：

<template>
    <div class="app">
       <input @click="sendMsg" type="button" :value="msg">
    </div>
</template>
<script>
  export default {
    data () {
        return {
            msg: "我是子组件的msg",  //将msg传递给父组件          
        }
    },
     methods:{
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
             this.$emit('func',this.msg)
         }
     }
}
</script>

注意：这里的func是父组件中绑定的函数名父子组件中命名要一致
父组件：

<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script>
  import child from './child.vue'
  export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFormSon(data){
                this.msgFormSon = data  //data为子组件传上来的数据
                console.log(this.msgFormSon)
            }
    }
}
</script>

总结一下：

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

二、父组件向子组件传值

父组件：

<template>
    <div class="app">
        <child :msg="message"></child>
    </div>
</template>
<script>
  import child from './child.vue'
  export default {
    data () {
        return {
            message: "this is msg"
        }
    },
    components:{
        child,
    }
}
</script>

子组件

<template>
    <div class="app">
         <h2>child子组件部分</h2>
          <p>{
   {message}}</p>
    </div>
</template>
<script>
  export default {
    props: {
      message:{
        type: String,
        default: ''
      },
    }
}
</script>

总结一下：

子组件在props中创建一个属性，用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

三、父组件调用子组件的方法

通过ref
在DOM元素上使用 r e f s 可以迅速进行 d o m 定位，类似于 refs可以迅速进行dom定位，类似于 refs可以迅速进行dom定位，类似于(“selectId”)

使用this.$refs.paramsName能更快的获取操作子组件属性值或函数
子组件：

methods:{
    childMethods() {
           alert("I am child's methods")
    }
}

父组件
在子组件中加上ref即可通过this.$refs.method调用

<template>
  <div @click="parentMethod">
    <children ref="c1"></children>
  </div>
</template>
<script>
  import children from 'components/children/children.vue'
  export default {
    data(){
      return {
      }
    },
    computed: {
    },
    components: {      
       children
    },
    methods:{
      parentMethod() {
        console.log(this.$refs.c1) //返回的是一个vue对象，可以看到所有添加ref属性的元素
        this.$refs.c1.childMethods();
      }
    }
  }
</script>