vue 父子传值 ref和props两种方法

CT不失眠

已于 2023-04-06 10:49:10 修改

阅读量713

点赞数

文章标签： vue.js javascript 前端

于 2022-10-09 16:51:05 首次发布

本文链接：https://blog.csdn.net/weixin_48854245/article/details/127229653

版权

一：ref

父组件

<template>
  <div id="app">
  <v-head ref="headlist"  @myevent="sendmsg"></v-head>
  </div>
</template>
<script>
import header from "@/components/Head";
import { defineAsyncComponent } from "vue";
export default {
  name: "App",
  components: {
    "v-head": header,
  },
  data(){
    return {}
  },
  mounted() {
    //this.$refs 可以直接使用子组件里的数据和方法
    console.log(this.$refs.headlist);//上面ref=xx 这里就写this.$refs.xx
  },
</script>

<style>
</style>

子组件

<template>
<div id="headinfo">
    头部组件
    <br>
    {{msg}}
</div>
</template>
<script>
export default {
    name:'headinfo',
    
    props:{
        msg:String
    },
}
</script>
<style>
</style>

二：props

父组件

<template>
  <div id="app">
    <v-head :msg="msg" ></v-head> //动态传值 父组件:xx 子组件的props里就写 xx:{}
  </div>
</template>

<script>
import header from "@/components/Head";
import { defineAsyncComponent } from "vue";
export default {
  name: "App",
  components: {
    "v-head": header,
  },
  data(){
    return {
       msg:'动态传值',
    }
  },
};
</script>

<style>
</style>

子组件

<template>
<div id="headinfo">
    头部组件
    <br>
    {{msg}}
</div>
</template>
<script>
export default {
    name:'headinfo',   
    //父组件写了 :msg 所以这里写 msg:xx
    props:{
        msg:String
    },
}
</script>
<style>
</style>

三：emit（子传父）

父组件

<template>
  <div id="app">
    <v-head @value="value" ></v-head> //动态传值 父组件:xx 子组件的props里就写 xx:{}
  </div>
</template>

<script>
import header from "@/components/Head";
import { defineAsyncComponent } from "vue";
export default {
  name: "App",
  components: {
    "v-head": header,
  },
  data(){
    return {
       arr:[]
    },
  methods:{
    value(val){
      this.arr = val      
    }
    }
  },
};
</script>

<style>

子组件

<template>
<div id="headinfo">
    头部组件
    <br>
</div>
</template>
<script>
export default {
    name:'headinfo',
    data(){
      return{
        arr:[]
      }
    }   
    methods:{
      select(){
         this.$emit("value",this.arr)//value和父亲那的@value要一样
      }
    }
}
</script>
<style>
</style>

资料参考了：vue父子组件传值：props,$ref和$emit_ey..的博客-CSDN博客_$ref传值

vue父子组件传值：props,$ref和$emit_ey..的博客-CSDN博客