您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Vue之组件传值

Vue之组件传值

  • 1.父子组件间的传值
    • 1.1父传子
    • 子传父:自定义事件

1.父子组件间的传值

1.1父传子

父组件通过属性绑定的方式向子组件传递数据,子组件通过props接收数据。
子组件:

<template>
  <div>
      <h3>{{Fmsg}}</h3>
  </div>
</template>

<script>
export default {
    props: ['Fmsg'],
    data() {
        return {
        }
    },
    methods: {
    }
}
</script>

父组件:

<template>
  <div>
    <child= :Fmsg="fMsg"/>
  </div>
</template>

<script>
import child from './chuanzhi/child'
export default {
    components: {
        child
    },
    data() {
        return {
            fMsg: '我是老爹',
        }
    },
    methods: {
    }
}
</script>

子传父:自定义事件

在子组件中通过$emit()来触发事件,在父组件中通过v-on来监听事件
子组件:

<template>
  <div>
      <button @click="sonHandle">发送</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            sMsg: '我是儿子传来的信息'
        }
    },
    methods: {
        sonHandle() {
            this.$emit('sonHandle', this.sMsg)
        }
    }
}
</script>

父组件:

<template>
  <div>
      <h4>{{Smsg}}</h4>
    <child @sonHandle="fatherHandle"/>
  </div>
</template>

<script>
import child from './chuanzhi/child'
export default {
    components: {
        child
    },
    data() {
        return {
            Smsg: ''
        }
    },
    methods: {
        fatherHandle(i) {
            this.Smsg = i
            console.log(i);
        }
    }
}
</script>

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进