我无法通过 vue.js 传递数据

Question

我是 vue.js 的新手.. 我使用 webpack + vue-cli 。

但我无法将数据从父母传递给孩子

这样的代码..

   <template lang="html">
  <div>
    <input v-model="parentMsg"></input>
    <br>
    <child v-bind:msg="parentMsg"></child>
  </div>
</template>

<script>
import child from './components/lists'
export default {
  data: function () {
    return {
      parentMsg: ''
    }
  },
  computed: {},
  ready: function () {},
  attached: function () {},
  methods: {},
  components: {
    child
  }
}
</script>

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      msg: ''
    }
  }
}
</script>

顺便说一句... 如何将子组件绑定到父数组..

parent: data: array[...],
I want to bind the first of children's data to arr[0]
second to array[1]..

这可能吗？还是使用 v-for??

Answer 1

在您的子组件中使用props 属性来接收父数据，例如：

<script>
export default {
  props: ['msg'],
  data: function () {
    return {

    }
  }
}
</script>

阅读更多关于这个here