vue组件传值方法

不爱吃糖的程序媛

发布于 2024-01-18 20:40:36

1030

发布于 2024-01-18 20:40:36

vue常用的三种传值方式有：父传子、子传父、非父子传值

父组件向子组件进行传值：父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息，在子组件写props接收父组件的值。父组件：

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <!-- 引入子组件 -->
    <child :abc="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

子组件

<template>
  <div>
    子组件:
    <span>{{abc}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props:['abc']
  }
</script>

2.子组件向父组件传值在子组件里面的方法里面写this.$emit(函数名，需要传的值) 子组件

<template>
  <div>
    子组件:
    <span>{{childValue}}</span>
    <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="send">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        childValue: '我是子组件的数据'
      }
    },
    methods: {
      send() {　　　　　//第一个参数自定义abc的函数
        //第二个参数this.childValue是需要传的值
        this.$emit('abc', this.childValue)
      }
    }
  }
</script>

父组件

<template>
  <div>
    父组件:
    <span>{{name}}</span>
    <br>
    <br>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <child v-on:abc="get"></child>//触发自定义abc的函数，此处的自定义abc的函数就是get函数
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      get: function (childValue) {
        // childValue就是子组件传过来的值
        this.name = childValue
      }
    }
  }
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-01-18，如有侵权请联系 cloudcommunity@tencent.com 删除

数据