首页 > 初学vue,问个问题

初学vue,问个问题

html代码

<h1>vue test</h1>
  <div id="header">
    <app></app>
  </div>
  <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>
<div id="box">
  {{isIndex}}
</div>
</template>

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


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


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

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

app.vue

<template>
<div id="box">
  {{isIndex}}
</div>
</template>
<script>
  export default {
    props:[isIndex]
  }
</script>
【热门文章】
【热门文章】