父元件向子元件傳值

Richard852555發表於2022-08-31
元件

父元件向子元件傳值

利用v-bind的來傳值

父元件

<template>
  <div id="app">
    <child-component v-bind:dataOfChild="dataOfParent"></child-component>
  </div>
</template>

<script>
  import childComponent from './components/childComponent'

  export default {
    name: 'App',
    data(){
      return {
        dataOfParent:'1111111111'
      }
    },
    components:{
      childComponent
    },
  }
</script>

複製程式碼

子元件

<script>
export default {
  name: 'childComponent',
 //子元件透過props來接收父元件傳來的值
 props:{
    //還可設定傳遞過來的型別和預設值等(此例子中規定預設值為：預設值,型別為String)
     'dataOfChild':{
         default:'預設值',
         type:String
     }
 }
}
</script>
複製程式碼

父元件向子元件傳值(利用v-bind來傳值)

v-bind:dataOfChild = "dataOfParent"（傳遞） =========>   props:{'dataOfChild'}（接收）
複製程式碼

子元件向父元件傳值

子元件

<template>
  <div>
    <button @click="sendDataToParent">向父元件傳值</button>
  </div>
</template>

<script>
  export default {
    name: 'childComponent',
    data(){
        return{
            childmsg:'我是子元件的值'
        }
    }
    methods:{
        sendDataToParent(){
            //$emit（even,value）even 是一個函式，value 是傳給父元件的值
            this.$emit('parentFunction',this.childmsg)
        }
    }
  }
</script>
複製程式碼

父元件

<template>
  <div id="app">
    <!--監聽子元件觸發的parentFunction事件,然後呼叫customParentFunction方法-->
    <child-component v-on:parentFunction = "customParentFunction"></child-component>
  </div>
</template>

<script>
  import childComponent from './components/childComponent'

  export default {
    name: 'App',
    components:{
      childComponent
    },
    methods: {
        customParentFunction(msg){
            console.log('子元件傳過來的值',msg)
        }
    }
  }
</script>
複製程式碼

子元件向父元件傳值

(子元件)this.$emit('parentFunction',this.childmsg)
(父元件dom)v-on:parentFunction="customParentFunction"
(父元件JS)customParentFunction(msg){
    //msg就是子元件傳遞過來的資料
}
複製程式碼
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章