Javascript 如何将数据从vue实例传递到组件

My Vue未呈现

分支

数据属性。如何将数据从根Vue传递到Hello.Vue组件？我尝试过v-bind和passdata，但似乎没有任何效果。非常感谢您的帮助

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

 Vue.use(require('vue-resource'))
 var esquery = require('./query') 
 Vue.config.productionTip = false

/* eslint-disable no-new */
var app= new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  data: {
     branches: ''
    },
  methods: {

    search1: function () {
      var self=this
      alert('hi')
      esquery.search().then(function(val){

        self.branches=val.hits.hits[0]._source
        alert(JSON.stringify(self.branches))
      })

     }

    }
  })
app.search1()
//alert (JSON.stringify(branches))

App.vue

<template>
  <div id="app">
    <router-view> </router-view> 
  </div>
</template>

<script>
export default {
  name: 'app',
    props: ['branches']
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Hello.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Design your application smartly</h2>
    <table>
    <tr> Branches </tr>
    <td v-for="branch in branches" :branches="branches"> {{ branch.branchname }}</td>
    </table> 
  </div>
</template>

<script>
export default {
  name: 'hello',
  props: ['branches'],
  data () {
    return {
      msg: 'Welcome to Html'
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

从“Vue”导入Vue
从“./App”导入应用程序
从“./路由器”导入路由器
Vue.use（需要（'Vue-resource'））
var esquery=require（“./query”）
Vue.config.productionTip=false
/*eslint禁用无新*/
var app=新的Vue({
el:“#应用程序”，
路由器，
模板：“”，
组件：{App}，
数据：{
分支：“”
},
方法：{
search1：函数（）{
var self=这个
警报（“嗨”）
esquery.search（）.then（函数（val）{
self.branchs=val.hits.hits[0]。\u来源
警报（JSON.stringify（self.branchs））
})
}
}
})
app.search1（）
//警报（JSON.stringify（分支））
App.vue
导出默认值{
名称：“应用程序”，
道具：['branchs']
}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}
你好，vue
{{msg}}
巧妙地设计您的应用程序
分支机构
{{branch.branchname}
导出默认值{
姓名：'你好'，
道具：['branchs']，
数据（）{
返回{
msg:“欢迎使用Html”
}
}
}
h1，h2{
字体大小：正常；
}
保险商实验室{
列表样式类型：无；
填充：0；
}
李{
显示：内联块；
利润率：0.10px；
}
a{
颜色：#42b983；
}

为什么不将方法放在组件中，只使用

数据

？如果该方法被重用，那么您可以使用mixin。我同意，在组件内部获得所需信息会容易得多。否则将很难遍历

vue路由器

，您将需要类似vuex的东西。谢谢。我把代码移到了Component为什么你要问两次同样的问题？