发新贴  快速回复

vue的组件通讯,子组件向父组件传值,传不过去

  baixiaojie
2017-07-17 15:11
这是父组件的html
<td><span class="plan_name"  v-on:transferUser="getData" v-on:click="getData">{{tumor}}</span></td>

这是父组件的js部分

export default {
  name: 'app',
   data() {
        return {
            tumor:'',
      }
    },
   methods:{
      getData(tumor){
      this.tumor=tumor
         console.log(tumor)
      }

}

这是父组件的html

<input class="colorfff" type="text" v-model="tumor" @change="setData">

这是父组件的js

export default {
  name: 'autoplan',
  data(){
      return {
          tumor:''
      }
  },
     methods:{
       setData(){
            this.$emit('transferUser',this.tumor);
         }
  }
}

但是现在父组件的数据渲染不出来,然后父组件的数据console出来是一些鼠标事件的代码,请教哪位大神指导我哪写错了

 
baixiaojie

写错了,下面两个是子组件的,上面的是父组件的

2017-07-17 18:25  回复本帖
攻前端之城

父组件:

<template>
  <div>
    <td><span class="plan_name" @transferUser="getData" @click="getData">{{tumor}}</span></td>
    <child @changeData="getData"></child>
  </div>
</template>

<script>
  import Child from 'components/child/child'

  export default {
    data () {
      return {
        tumor: ''
      }
    },
    methods: {
      getData (tumor) {
        this.tumor = tumor
      }
    },
    components: {
      Child
    }
  }
</script>
子组件:

<template>
  <input type="text" v-model="tumor">
</template>

<script>
  export default {
    data () {
      return {
        tumor: ''
      }
    },
    watch: {
      tumor (newVal) {
        this.$emit('changeData', newVal)
      }
    }
  }
</script>
 

2017-07-18 13:38  回复本帖
j_love

攻前端之城 2017-07-18 13:38发表的内容:

父组件:

<template>
  <div>
    <td><span class="plan_name" @transferUser="getData" @click="getData">{{tumor}}</span></td>
    <child @changeData="getData"></child>
  </div>
</template>

<script>
  import Child from 'components/child/child'

  export default {
    data () {
      return {
        tumor: ''
      }
    },
    methods: {
      getData (tumor) {
        this.tumor = tumor
      }
    },
    components: {
      Child
    }
  }
</script>
子组件:

<template>
  <input type="text" v-model="tumor">
</template>

<script>
  export default {
    data () {
      return {
        tumor: ''
      }
    },
    watch: {
      tumor (newVal) {
        this.$emit('changeData', newVal)
      }
    }
  }
</script>
 

这个答案是正确的。

2017-07-19 16:32  回复本帖
登录 后才可以发表回复