Vue之组件传值

26
五月
2021

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>
TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员