vue父子组件变量同步（Vue之组件写tab切换父-子）

<template id="myName"> <div> <ul> <li v-for="(list,index) in data" v-on:click="n=index">{{list.title}}</li> </ul> <div v-for="(list,index) in data" v-show='index==n'>{{list.content}}-{{a}}</div> </div> </template> <div id="app"> <!-- tab切换 --> <my-name v-bind:data="lists" :a='2'></my-name> <hr> <my-name v-bind:data="lists2"></my-name> </div>

js:

<script> new Vue({ el:'#app', data:{ n:0, lists:[ {title:'标题1',content:'内容1'}, {title:'标题2',content:'内容2'}, {title:'标题3',content:'内容3'}, {title:'标题4',content:'内容4'}, ], lists2:[ {title:'AAA',content:'内容1'}, {title:'BBB',content:'内容2'}, ], }, components:{ //组件 'my-name':{ //组件的名称 template:'#myName', data(){ return { n:0 } }, props:['data','a'] //组件中父-子传参 }, } }); </script>