vue父子组件传值

生活百科 2022-10-24 08:27www.ai-classes.cn生活常识

vue父子组件如何传值呢?我们一起了解一下吧!

父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件。以下是父子组件传值的具体操作。

1.父向子传值props

父组件<child :inputNa="na">

子组件

(1)props: {
   inputNa: String,

   required: true

  }

(2)props: ["inputNa"]

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

子组件:

 <span>{{childValue}}</span>

 <!-- 定义一个子组件传值的方法 -->

  <input type="button" value="点击触发" @click="childClick">


 export default {
  data () {
   return {
    childValue: '我是子组件的数据'

   }

  },

  thods: {
   childClick () {  

    this.$emit('childByValue', this.childValue)

   }

  }

 }

关于父子组件传值,我们就分享到这啦!

Copyright © 2014-2025 Www.ai-classes.cn 爱句子网