溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue中使用props傳值的方法

發(fā)布時間：2020-08-25 13:52:42 來源：腳本之家 閱讀：179 作者：yang_da_da 欄目：web開發(fā)

1.靜態(tài)傳值（在父組件中賦值好props中屬性的值傳遞給子組件）

父組件

<template>
 <div>
  <input v-model="message">
  <child message="hello"></child>
 </div>
</template>
<script>
 import child from './components/child.vue'
 export default{
  components:{
   child
  }
 }
</script>

子組件

<template>
 <p>{{message}}</p>
</template>
<script>
 export default{
  props:['message'],
  data(){

  },
  methods:{
   fun:function(){

   }
  }
 }
</script>

結果：打印hello

2.動態(tài)傳遞（根據父組件中值的改變，props動態(tài)的改變子組件中的值）

父組件

<template>
 <div>
  <input v-model="message">
  <!--將childmessage與message通過v-bind指令綁定!-->
  <child v-bind:childmessage="message"></child>
 </div>
</template>
<script>
 import child from "./components/child.vue"
 export default{
  //構建child組件
  components:{
   child
  },
  data(){
   return {
    //初始化message
    message:''
   }
  }
 }
</script>

2.子組件

<template>
 <div>
  <p>childmessage is:{{childmessage}}</p>
 </div>
</template>
<script>
 export default{
  //將childmessage傳遞給child
  props:['childmessage']
 }
</script>

結果：兩者同步改變

以上所述是小編給大家介紹的vue中使用props傳值的方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手