vue中子组件向父组件传值

• Z时代
• 2024-01-10
• 分类：综合

1.子组件$emit()触发，父组件$on()监听

子组件：
<template>
  <div class="hello">
    <button v-on:click="onClickMe">telltofather</button>
  </div>
</template>
<script>
export default {
  methods: {
    onClickMe () {
      this.$emit('childClick',this.msg);//将this.msg传给父组件
    }
  }
}
</script>

父组件：

<template>
    <div id="app">
    <p>child tell me: {{childWords}}</p>
    <child v-on:childClick='listenToMyBoy'>            
    </child>
</div>
</template   >
<script>
import child from './components/child';
export default {
  components: {
    child
  },
  data () {
    return {
      childWords: ''
    }
  },
  methods: {
    listenToMyBoy (msg) {
      this.childWords = msg;//获取到子组件传过来的值msg
    }
  }
}
</script>

以上是 vue中子组件向父组件传值 的全部内容， 来源链接： utcz.com/z/376609.html