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>