1.靜態傳值（在父組件中賦值好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.動態傳遞（根據父組件中值的改變，props動態的改變子組件中的值）

父組件

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