IT科技

當前位置 /首頁/IT科技 > /列表

vue父子組件傳值

父子組件就是在一個vue文件中引入另一個vue文件,被引入vue文件就是子組件,引入vue文件的vue文件就是父組件。以下是父子組件傳值的具體操作。

1.父向子傳值props

父組件:<child :inputName="name">

子組件:

(1)props: {
   inputName: String,

   required: true

  }

(2)props: ["inputName"]

vue父子組件傳值

2.子組件向父組件傳值$emit

子組件:

 <span>{{childValue}}</span>

 <!-- 定義一個子組件傳值的方法 -->

  <input type="button" value="點擊觸發" @click="childClick">


 export default {
  data () {
   return {
    childValue: '我是子組件的數據'

   }

  },

  methods: {
   childClick () {  

    this.$emit('childByValue', this.childValue)

   }

  }

 }

vue父子組件傳值 第2張

關於父子組件傳值,我們就分享到這啦!

TAG標籤:組件 傳值 vue 父子 #