Javascript vue js将数据传递给子组件

我有一个组件

联系人列表的子组件
联系人视图
，它本身就是一个子组件。问题是我无法动态更改此组件的内容

html

<div id="wrapper">
  <component :is="currentView" keep-alive></component>
</div>



js

var IndexPage = Vue.component('index-page', {
  template: '<div>Welcome to index page</div>'
})

var Contact = Vue.component('contactView', {
  template: `
  <div class="person-info">
    <ul v-for="contact in contacts">
      <span>here</span>
      <li v-if="contact.email">
        <div class="icon icon-mail"></div>
        {{contact.email}}
      </li>
    </ul>
  </div>
  `,
  props: ['contacts']
})

var ContactsList = Vue.component('contacts-list', {
  template: `
  <div id="list">
    list
    <div v-for="item in items">
        <div class="person">
            person
          <span class="name">{{item.name}}</span>
          <button class="trig">Show {{item.id}}</button>
        </div>
        <contact-view :contacts="item.contacts"> </contact-view>
    </div>
  </div>`,
  computed: {
    items: function(){
      return this.$parent.accounts
    }
  },
  components: {
    'contact-view': Contact
  }
})


var app = new Vue({
  el: '#wrapper',
  data: {
    contacts: [],
    currentView: 'index-page'
  }
})

app.currentView = 'contacts-list';
app.accounts = [{name: 'hello', id: 1}];

 $(document).on("click", "button.trig", function(){
    alert('triggered');
    app.accounts[0].contacts = [{email: '123@ya.ru'}]
})

var IndexPage=Vue.component（'index-page'{
模板：“欢迎使用索引页”
})
var Contact=Vue.component（'contactView'{
模板：`

在这里

{{contact.email}


`,
道具：[“联系人”]
})
var ContactsList=Vue.component（'contacts-list'{
模板：`
列表
人
{{item.name}
显示{{item.id}
`,
计算：{
项目：功能（）{
返回此。$parent.accounts
}
},
组成部分：{
“联系人视图”：联系人
}
})
var app=新的Vue({
el:“#包装器”，
数据：{
联系人：[]，
currentView:“索引页”
}
})
app.currentView='联系人列表'；
app.accounts=[{name:'hello'，id:1}]；
$（document）.on（“click”，“button.trig”，function（））{
警报（“触发”）；
app.accounts[0]。联系人=[{电子邮件：'123@ya.ru'}]
})

单击按钮后，组件不会显示更改的数据。如何正确执行此操作？
Vue在动态向对象添加属性时。在这部法典中

app.accounts = [{name: 'hello', id: 1}];

您正在将
帐户
属性动态添加到Vue。相反，从一个空数组开始

data: {
  contacts: [],
  currentView: 'index-page',
  accounts: []
}

在这部法典中

 $(document).on("click", "button.trig", function(){
    alert('triggered');
    app.accounts[0].contacts = [{email: '123@ya.ru'}]
})

您正在将
contacts
属性添加到以前没有
contacts
属性的对象中。如果您将代码更改为此，它将起作用

 $(document).on("click", "button.trig", function(){
    alert('triggered');
    Vue.set(app.accounts[0],'contacts',[{email: '123@ya.ru'}])
})

我不知道您为什么选择使用jQuery对数据进行这些更改，设置按钮的处理程序等等。所有这些都可以通过Vue完成。
jQuery只是一个例子。您提出的方法对我不起作用，@Marsel.V您也在动态添加
帐户。我更新了答案。