zoukankan      html  css  js  c++  java
  • 下拉框筛选数据,父子组件传值

    父组件:

    <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>
  • 相关阅读:
    Day9
    Day9
    Day9
    洛谷 P1896 [SCOI2005]互不侵犯
    洛谷 P1879 [USACO06NOV]玉米田Corn Fields
    Day9
    最大m段子段和 Day9
    jsp内置对象-application对象
    jsp内置对象-session对象
    jsp内置对象-response对象
  • 原文地址:https://www.cnblogs.com/wss198909/p/15189114.html
Copyright © 2011-2022 走看看