Vue2.0组件间数据传递示例

父组件：

<template>
 <p>
//message为子控件上绑定的通知；recieveMessage为父组件监听到后的方法
  <child2 v-on:message="recieveMessage"></child2>
 </p>
</template>
<script>
 import {Toast} from 'mint-ui'
 export default{
  components: {
   child2: require('./Child2.vue'),
   Toast
  },
  methods: {
   recieveMessage: function (text) {
    Toast('监听到子组件变化'+text);
   }
  }
 }
</script>

子组件：

<template>
 <p>
  <input type="text" v-model="msg" @change="onInput">
 </p>
</template>
<script>
 export default{
  data(){
   return {
    msg: '请输入值'
   }
  },
  methods: {
   onInput: function () {
    if (this.msg.trim()) {
     this.$emit('message', this.msg);
    }
   }
  }
 }
</script>

以上所述是小编给大家介绍的Vue2.0组件间数据传递，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！

无相关信息