Vue中父组件以及子组件传值问题

原创已于 2022-08-09 16:43:30 修改 · 10w+ 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #组件化 #js

于 2021-11-24 17:35:09 首次发布

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Vue.js中父子组件间的通信方式。通过Props实现父组件向子组件传递数据，如msg、count和options，并展示了如何在父组件模板中使用。同时，文章详细讲解了子组件如何通过$emit向父组件发送事件，例如通过`SendMsg`方法触发`listenToChild`事件来传递数据。还提供了完整的代码示例，包括父组件App.vue和子组件HelloWorld.vue，展示动态数据交互的过程。

前言：在一些页面中不单单的纯纯的一个vue文件，vue讲究组件化开发，但是一般的肯定会产生交互事件，今天了解了这个传值，特此的来记录一下。

一.父组件向子组件传值

父组件向子组件传值会用到：Prop，一般的我们需要在子组件中进行相关的声明，如下所示：

子组件为HellowWorld.vue

<script>
export default {
  name: 'HelloWorld',
  //接收的变量
  props: {
  //声明相关的类型
    msg: String,
    count:Number,
    options:[]
  },
  data(){
    return{

    }
  },
  methods:{
  }
}
</script>

在父组件App.vue中

<template>
  <div id="app">
    <!-- msg为字符串类型，count为数字，options为数组 -->
    <HelloWorld msg="First App" :count='count' :options="options"/>
  </div>
</template>

<script>
//引入组件
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return{
      count:0,
      options:[],
    }
  },
  methods:{
  }
}
</script>

那么在页面上效果就是：
在这里插入图片描述
当然我们也可以写一些事件来进行动态的数据交互，例如：

二.子组件向父组件传值

在子组件传值时会用到$emit，值得注意的是：在子组件传值时候的方法要与父组件中监听的方法名称相同，也就是示例中的 listenToChild

Helloworld.vue子组件：

<template>
  <div class="hello">
    <!-- 文字信息 -->
    <h1 >{{ msg }}</h1>
    <!-- 数字信息 -->
    <h2>{{count}}</h2>
    <!-- 渲染数组信息 -->
    <ul>
      <li v-for="(item,index) in options" :key="index">{{item}}</li>
    </ul>
    <!-- 进行传值 -->
    <button @click="SendMsg">点击</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    count:Number,
    options:[]
  },
  data(){
    return{

    }
  },
  methods:{
    SendMsg(){
      // listenToChild  注意
      this.$emit('listenToChild',this.options)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
/* li {
  display: inline-block;
  margin: 0 10px;
} */
a {
  color: #42b983;
}
</style>

App.vue父组件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- listenToChild 为子组件传来的方法 -->
    <HelloWorld msg="First App" :count='count' :options="options" @listenToChild="show"/>
    <button @click="Add">+</button>
    <button @click="restart">置零</button>
    <button @click="Sub">-</button>
    <ul>
      <li v-for="(item,index) in data" :key="index">{{index}}，{{item}}</li>
    </ul>
  </div>

</template>

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

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return{
      // 要传去子组件的参数
      count:0,
      options:[],
      // 子组件传来的参数
      data:[]
    }
  },
  methods:{
    Add(){
      this.count=Number(this.count)+1
      this.options.push('添加一次，当前数值为：'+this.count)
    },
    Sub(){
     
      if(this.count<=0){
        this.options.push('当前数值不能变化了'+this.count)
      }else{
        this.count=Number(this.count)-1
       this.options.pop()
      }
       
    },
    show(data){
      console.log(data)
      this.data=data
    },
    restart(){
      this.count=0
      this.options=[]
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
button{
  margin: 20px;
}
ul {
  list-style-type: none;
  padding: 0;
}
</style>