vue中使用props傳值的方法

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

成都創(chuàng)新互聯(lián)公司主要從事成都網站設計、網站建設、外貿網站建設、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務利津,十年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792

父組件

<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傳值的方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網站的支持！

名稱欄目：vue中使用props傳值的方法
文章鏈接：http://muchs.cn/article12/jephdc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、定制網站、品牌網站建設、品牌網站制作、網站內鏈、自適應網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網站網頁設計