vue父子组件传值

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

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

1.父向子传值props

父组件:<child :inputName="name">

子组件:

(1)props: {
inputName: String,

required: true

}

(2)props: ["inputName"]

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

子组件:

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

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

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


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

}

},

methods: {
childClick () {

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

}

}

}

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

标签:VUE 传值 父子组件

免责声明:本内容来自橡树街平台创作者或收集于互联网公开资源,不代表橡树街网的观点和立场。如有侵权内容,请联系我们删除。联系邮箱:ihuangque@qq.com
相关推荐
  • vue路由跳转的三种方式
    vue路由跳转的三种方式
    08-05
  • vue路由跳转
    vue路由跳转
    08-05
  • vue父子组件传值
    vue父子组件传值
    08-05
  • vue.set()用法
    vue.set()用法
    08-05
  • vue publicpath
    vue publicpath
    08-05
  • vue获取当前路由
    vue获取当前路由
    08-05
  • vue async
    vue async
    08-05
  • vue router跳转
    vue router跳转
    08-05
  • vue父子组件通信
    vue父子组件通信
    08-05
  • vue刷新当前页面
    vue刷新当前页面
    08-05