天天看點

vue父子元件之間傳值,動态改變搜尋框标題

子元件:

<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>