vue2父子组件通信

学如逆水，不进则退

已于 2023-03-08 22:46:08 修改

阅读量594

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

于 2020-12-06 18:51:59 首次发布

本文链接：https://blog.csdn.net/TZ1284063988/article/details/110733992

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍Vue.js中父组件与子组件之间的数据传递方法，包括如何从父组件向子组件传递数据、子组件如何向父组件发送事件及数据、子组件如何获取父组件的数据以及父组件如何获取子组件的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父组件传值到子组件
2.子组件通过$emit向父组件传值
3.子组件获取父组件值
4.父组件获取子组件的值

1.父组件传值到子组件

父组件传过来的数据类型
点击子组件按钮执行父组件事件
限制父组件传递过来的数据类型
）

父组件 home.vue 

<template>
  <div class="home">
  <button @click="btn">点击</button>
    <HelloWorld :age="age" :name="name" :Btn="hello"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  data() {
    return {
      age:100,
      name:'小明'
    }
  },
  methods: {
  //事件接收子组件num的参数
    hello(num){
      alert(num)
    },

     btn(){ //点击改变传给子组件的参数
        this.num=123
     }

  },
  components: {
    HelloWorld
  }
}
</script>

子组件 helloWord.vue 接收父组件的值
<template>
   <div>
       <h1>年龄 {{age}}</h1>
       <h1>姓名 {{name}}</h1>
       <button @click="Btn(num)">执行父组件的方法</button>
   </div>
</template>
 
<script>
 
export default {
  // props:['age','name'],     //接收父组件的值
  props:{   //对传过来的值类型进行限制
    age:{ type:Number, required:true,default:99},   //required代表是否必须传值。defalult是默认值
    name:String,
    Btn:Function,
  },
data() {
   return {
    num:100
}
 
},
 
}
</script>

2.子组件通过$emit向父组件传值

通过点击this.$emit(‘事件’，参数)，调用父组件里子组件上的事件

子组件hellWord.vue

<template>
   <div>
      <button @click="btnClick">面试成功</button>
   </div>
</template>
 
<script>
 
export default {
data() {
   return {
 
}
 
},

methods: {
  btnClick(){
    this.$emit('btn',{name:"面试成功!"})
  }
},
 
}
</script>

父组件 home.vue

<template>
  <div class="home">
    <HelloWorld @btn="btn"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  data() {
    return {
      age:100,
      name:'小明'
    }
  },
  methods: {
      btn(obj){
        alert(obj.name)
      }
  },
  components: {
    HelloWorld
  }
}
</script>

3.子组件获取父组件值

子组件

<template>
  <div>
    <el-button>{{name}}</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name:"李鸽"
    }
  },
}
</script>

父组件通过$children[0]来访问子组件

   this.$children[0].name=“李戈”

4.父组件获取子组件的值

父组件

 data() {
    return {
      name:"hello"
    }
  },

子组件通过$parent获取来访问父组件

  methods: {
    getApp(){
     // eslint-disable-next-line no-console
     console.log(this.$parent.name);
    }
  },

通过子组件绑定ref属性获取

<template>
  <div id="app">
    <img src="./assets/logo.png" @click="haha">
    <el-button >{{name}}</el-button> 
    <HelloWorld ref="hello"></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  data() {
    return {
      name:"hello"
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    haha(){
        // eslint-disable-next-line no-console
        console.log(this.$refs.hello.name);
    }
  },
}
</script>