如何在Vue中使数据属性具有反应性？

Question

希望evrything很好。

我正在尝试使vue实例中的数据具有响应性：

new Vue({// eslint-disable-line no-new
  el: '#app',
  data () {
    return {msg: 'not updated'}
  },
  router,
  components: { App },
  template: '<App/>',
  mounted () {
    axios.get('http://127.0.0.1:8000/api/stores').then(response => (console.log(response.data.data)))
  }
})

现在，当我尝试使用{{msg}}时出现错误：绳索或方法“ msg”未在实例上定义，但在渲染期间被引用

任何理由？

Answer 1

对于组件'App'设置道具：

new Vue({
    name: 'App',
    //set props msg for recieve from parent
    props: {
        msg: String
    },
    router,
    template: '<p>{msg}</p>'
  })

并从组件模板传递消息：

<App :msg="msg" />