vue父子元件傳值之間的個人膚淺的了解

父元件

父元件-----子元件傳值的話就是需要在父元件綁定一個自定義的屬性值或屬性名 子元件内部通過props接收

<template>
  <div class="hello">
    父元件：這是子元件傳給我的值{{num}}
    <Child :username='name' @getNum='getmsg'></Child>
  </div>
</template>

<script>
import Child from './Child'
export default {
  name: 'Father',
  components:{
    Child
  },
  data () {
    return{
      name:"zhangsan",
      num:''
    }
  },
  methods:{
    getmsg(num){
      this.num=num;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

           

子元件 -----父元件傳值的就是通過綁定自定義的事件在事件内部通過$emit推送給父元件

<template>
<div class="child">
    子元件-------父元件傳過來的值{{username}}
    <button @click="senmsg">向父元件傳遞的數值</button>
 </div>   
</template>
<script>
export default {
    name:'Child',
    props:['username'],
    data(){
        return{
            num:0
        }
    },
    methods:{
        senmsg(){
            this.$emit('getNum',this.num++);
        }
    },
    mounted(){

    }
}
</script>
<style>
     .child{
         margin-top:5%;
     }
</style>



           

小白第二次寫部落格 輕噴 隻是個人的随筆 有哪些了解不對的地方 多多指教 共同進步