下拉框筛选数据,父子组件传值

父组件:

<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>
原文地址:https://www.cnblogs.com/wss198909/p/15189114.html