javascript - 初学vue,问个问题

Question

html代码

<h1>vue test</h1>
  <p id="header">
    <app></app>
  </p>
  <script type="text/javascript" src="dist/app.js"></script>

app.js代码

var Vue = require('vue'); 
var App = require('./app.vue');
new Vue({
  el:'#header',
  components:{
    app: App
  },
  data: {
    isIndex: "true"
  }
});

app.vue代码

<template>
<p id="box">
  {{isIndex}}
</p>
</template>

请问我在app.vue里面要怎样把app.js的data获取呢

Answer 1

父组件传值到子组建有两张办法，一种就是直接访问父组件的一个数组 this.$children，直接改变子组建的datas，具体可参考这里，这种方式强耦合，不推荐。另一种就是用props，具体可参考props，
html：

<h1>vue test</h1>
  <p id="header">
    <app :is-index="isIndex"></app>
  </p>
  <script type="text/javascript" src="dist/app.js"></script>

app.vue

<template>
<p id="box">
  {{isIndex}}
</p>
</template>
<script>
  export default {
    props:[isIndex]
  }
</script>

Answer 2

为什么不在 app.vue 里写呢, 组件自己管自己的数据，要么从父组件传值下来