简体   繁体   English

VueJS-使用v模型将数据(数组)从子组件传递到父组件

[英]VueJS - Pass data (array) from child to parent component with v-model

I try to emit data (array) from child to parent component with v-model but when the parent component created, my console.log doesn't work. 我尝试使用v模型从子组件向父组件发出数据(数组),但是在创建父组件时, console.log无法正常工作。 I wouldn't work with Vuex cause of I'm beginner. 我不会使用Vuex,因为我是初学者。

Here my child component , this component have nested child: 这是我的child component ,该组件具有嵌套子代:

<template>
  <PhaseListItem
    v-model="selectedPhase"
    ...
  />
</template>

<script>
  import PhaseListItem from '@/components/phase/PhaseListItem'

  export default {
    name: 'PhaseList',

    components: {
      PhaseListItem
    },

    data () {
      return {
        data: ['item 1', 'item 2'],
        selectedPhase: undefined,
      }
    },

    watch: {
      selectedPhase () {
        this.$emit('phaselist:selected', this.data)
       }
    },
  }
</script>

Here my parent child : 这是我的parent child

<template>
  <PhaseList
    @phaselist:selected="onChangeChild"
  />
</template>

<script>
  import PhaseList from '@/components/phase/PhaseList'

  export default {
    name: 'PhaseCreate',

    components: {
      PhaseList
    },

    methods: {
      onChangeChild (value) {
        console.log('emit', value) // I want to see my array from child component
      }
    },
  }
</script>

Thank you, 谢谢,

Just change 只是改变

@phaselist:selected="onChangeChild"

to

@selected="onChangeChild"

on the father 在父亲身上

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM