Vue中父子组件之间传值,父传子,子传父

169 阅读1分钟

父传子

父组件

<cart-item :text="text"></cart-item>

import CartItem from '@/components/CartItem'

export default {
  components: {
    CartItem,
  },
  data() {
    return {
      text:'你好'
    }
  }
},

子组件

<div>{{text}}</div>

export default {
 props: {
   text: Object
 },
}

子传父

子组件

<button @click="click">子传父</button>

methods: {
  click() {
        this.$emit('msg', this.message);
    }
}

父组件

<cart-item @child="getmsg"></cart-item>
<div>{{msg}}</div>
    
methods: {
  getmsg(value) {
    this.msg = value;
  }
}