vue父子组件之间传值，动态改变搜索框标题

墨蓝 2022-02-12 10:12 292阅读 0赞

子组件：

<template>
        <div id="child" >
            <div> 
              <span>{
       {childName}}</span><br />
             
              <div class="divWidth">
                   {
       {startTime}}：
                   <input type="text" v-model="childValue" />
                   <button @click="childClick">搜索</button>
              </div>
            </div>
        </div>
    </template>
    
    <script>
    export default {
      name:'child',
      data(){
       return {
           childValue:'hhhhh'
       }
      },
      props:{
        childName:'',
        startTime:'',
        twoValue:''
      },
      methods:{
          childClick(){
             this.$emit("send", this.childValue);
          },
          initData(){
              console.log(this.twoValue)
          }
      },
      mounted(){
          
      }
    }
    </script>

父组件：

<template>
      <div>
        <div>
            <child :startTime="startTime" :twoValue="twoValue" :childName="name" @send="childByValue"></child>
            {
       {childValue}}
        </div>
      </div>
    </template>
    
    <script>
        import child from '@/components/child'
        export default {
            name: "Customer",
            data(){
              return{
                  name:'yfx',
                  childValue:'',
                  startTime:"结束日期",
                  twoValue:{
                    one:'ONE',
                    two:'TWO'
                  }
              }
            },
            components:{
                child
            },
            methods:{
              childByValue:function(childValue) {
                // childValue就是子组件传过来的值
                this.childValue = childValue;
                console.log(this.childValue)
              },
         
    
            },
            mounted(){
              this.initData();
            }
    
        }
    </script>
    
    <style scoped>
    
    </style>