父组件:
<template> <div class="about"> 科目查询<br /><br /> <select v-model="selected"> <option>请选择</option> <option v-for="(item,index) in data" :key="index">{{item.name}}</option> </select><br /><br /> <ShowMessage :name="newdata.name" :info="newdata.info" :list="newdata.list"></ShowMessage> </div> </template> <script> import ShowMessage from "../1.4/data.vue" export default { components:{ ShowMessage }, data(){ return{ selected:'请选择', data:[{ name:'张三', info:'信息管理', list:[{ id:1, content:'会计学', },{ id:2, content:'社会学', }] }, { name:'李四', info:'财务管理', list:[{ id:1, content:'数学', },{ id:2, content:'语文', }] }], newdata:[] } }, methods:{ ChangeName(){ let data = { name:'李四', info:'财务管理', list:[{ id:1, content:'数学', },{ id:2, content:'语文', }] } this.newdata = data }, ChangeInfo(){ this.info = "new" + this.info }, ChangeList(){ let newlist = {id:3,content:'数学'} this.list.push(newlist) console.log(this.list) }, ChoseInfo(selected){ this.newdata = this.data.find(val => val.name.includes(selected)) } }, watch:{ selected:function(){ this.ChoseInfo(this.selected) //this.newdata = this.data.find(val => val.name.includes(this.selected)) } } } </script>
子组件:
<template> <div class="data"> 姓名:{{name}}<br /> 专业:{{info}}<br /> 学科:<span v-for="item in list" :key="item.id">{{item.content}} / </span><br /> </div> </template> <script> export default { name: 'HelloWorld', props: { name: String, info: String, list: Array } } </script>