vue組件—父組件向子組件傳值(通過屬性綁定)


父組件向子組件傳值 <!--父組件在調用子組件時候,可以通過數據綁定的形式,傳值為子組件-->
  <!--注意:綁定的方法或者屬性名字不能是帶有駝峰或者連字符的,可能是命令規范-->
  //props:道具 只有綁定過后並在其中定義過,子組件才能使用父組件的某些屬性 //這里的數據,只可讀不可寫
  
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app"> 
    //父組件可以在引用子組件的時候,通過屬性綁定 (v-bind)的形式,把需要傳遞給子組件的數據,以屬性綁定的形式,傳遞到子組件內部,供子組件使用
        <com1 v-bind:parentmsg="msg"></com1>
    </div>

 <script>
          var vm = new Vue({ //創建vue 實例,得到viewmodel
             el:'#app', data:{ msg:'123父組件data的數據' }, methods:{}, components:{ //子組件中默認無法訪問父組件中的 data 數據和 methods 中的方法
 com1:{ data() { // 1、子組件 data 數據是自己私有的,不是父組件傳遞的,比如子組件通過ajax請求的數據都可以放在 data 中。2、props 中的數據只讀無法賦值,data 中的數據可讀可寫
                        title: 123, content: 'qqq' } template:'<h1 @click="change">這是子組件--{{parentmsg}}</h1>',   // 組件中的所有 props 中的數據,都是通過父組件傳遞給子組件的
                     props:['parentmsg'], //把父組件傳遞過來的 parentmsg 組件在prop數組中定義一下,這樣才能使用這個數據
 directives:{}, filters:{}, components:{}, methods:{ change() { this.parentmsg = '被修改' } }, } } }); </script>
</body>
</html> 參考鏈接:
https:
//blog.csdn.net/qq_42036616/article/details/82889716

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM