<output id="cuifj"><form id="cuifj"></form></output>
<var id="cuifj"><strike id="cuifj"><small id="cuifj"></small></strike></var>
        1. <code id="cuifj"></code>
          1. <var id="cuifj"><rt id="cuifj"><big id="cuifj"></big></rt></var>
          2. <input id="cuifj"><rt id="cuifj"></rt></input>
                Java人工智能+Pythonweb前端UI/UE設計PHP+H5全棧工程師C/C++云計算大數據新媒體軟件測試產品經理電商運營網絡安全+運維Go語言與區塊鏈影視制作PMP項目管理認證iOSAndroid+物聯網.NET

                【Web前端】Vue 組件間傳值,組件間傳值,父子組

                來源:黑馬程序員

                瀏覽595人

                2019.05.09

                這個Demo中通過 v-bind綁定,實現了父子組件間的數據傳遞
                子組件往父組件傳值
                        1
                、現在子組件中進行監聽注冊 @click='handleItemClick'
                        2
                、在子組件中的methods中注冊        handleItemClick
                        3
                this.$emit("delete");        子組件 被點擊時,向外觸發一個 delete事件,
                        4
                、同時需要在父組件中進行對該事件進行監聽 @delete="handleItemClick"
                        5
                、在父組件的methods 中注冊 handleItemClick方法
                1
                2
                3
                4
                5
                父組件往子組件傳值
                   1
                、通過v-bind綁定數據,
                   2
                、在組件        props:[] 中注冊,就可以訪問數據了
                           Vue.component("todo-item",{
                                   props:['todo'],
                                   template:"<li>{{todo}}</li>"
                           });
                1
                2
                3
                4
                5
                6
                <!DOCTYPE html>
                <html>
                <head>
                        <meta charset="utf-8">
                        <title>
                簡單的組件間傳值,父子組件之間的數據傳遞</title>
                        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
                </head>
                <body>
                <div id="app">
                                <!--
                                         M V P
                                        M V VM
                                -->
                                <!-- v-model
                實現 數據雙向綁定,在 data中注冊一下,兩邊數據會保持一致,誰變都變 -->
                                <input type="text" v-model='inputValue'>
                                <!--
                使用 v-on:click 來實現 事件綁定 handleBtnClick  ,然后從 方法中找個這個方法,監聽執行 -->
                                <input type="button" name="" v-on:click="handleBtnClick" value="
                提交">
                                <ul>
                                        <!-- <li v-for="item in list">{{item}}</li> -->
                                        <!-- v-for
                遍歷 list 每個元素 -->
                                        <!-- 
                                                1
                、這里有個 及其重要的注意點 定義組件名字為 TodoItem 使用時要寫成 todo-item
                                                
                即把大寫變小寫,每個之間加一個 -         !!!!!!!
                                                2
                、或者直接定義為        todo-item

                                        -->
                                        <!-- 
                                                v-bind
                實現數據綁定,
                                                
                list中的數據給 item
                                                item
                content綁定在一起,
                                                
                這里要在 Vue.component 中添加 props:['content']
                                                
                這里的 v-bind: 后的名字 要和 props[] 中一致!!!! 
                                        -->
                                        <todo-item         v-bind:todo="item" 
                                                                v-bind:index="index"
                                                                v-for="(item,index) in list" 
                                                                @delete="handleItemClick">
                                        </todo-item>

                                </ul>
                        </div>
                        <script type="text/javascript">
                                // Vue
                創建局部組件
                                /*
                                        
                局部組件在定義后不能像全局組件一個樣直接使用,需要在要使用的Vue對象中進行注冊
                                        components:{
                                                TodoItem:TodoItem
                                        }

                                        
                在組件中進行事件綁定了普通的事件綁定一樣,
                                        
                v-on:click 進行標記,然后在methods 中注冊
                                */
                                var TodoItem = {
                                        props:['todo','index'],
                                        // v-on:click
                可以簡寫為 @click
                                        // v-bind:
                可以簡寫 :
                                        template:"<li @click='handleItemClick'>{{todo}}</li>",
                                        /*
                                                
                子組件往父組件傳值
                                                        1
                、現在子組件中進行監聽注冊 @click='handleItemClick'
                                                        2
                、在子組件中的methods中注冊        handleItemClick
                                                        3
                this.$emit("delete");        子組件 被點擊時,向外觸發一個 delete事件,
                                                        4
                、同時需要在父組件中進行對該事件進行監聽 @delete="handleItemClick"
                                                        5
                、在父組件的methods 中注冊 handleItemClick方法
                                        */
                                        methods:{
                                                handleItemClick:function () {
                                                        this.$emit("delete",this.index);
                                                }
                                        }
                                }

                        /*                
                                // Vue
                提供的創建 全局組件
                                Vue.component("todo-item",{
                                        props:['todo'],
                                        template:"<li>{{todo}}</li>"
                                });
                        */


                                var app = new Vue({
                                        el:'#app',
                                        components:{
                                                TodoItem:TodoItem
                                        },
                                        data:{
                                                // list:['Hello','World'],
                                                list:['Hello','World!'],
                                                inputValue:'v-model'
                                        },
                                        methods: {
                                                handleBtnClick:function () {
                                                        this.list.push(this.inputValue);
                                                },
                                                handleItemClick:function (index) {
                                                        this.list.splice(index, 1);
                                                }
                                        }
                                                
                                });
                        </script>
                </body>
                </html>


                收藏文章

                分享

                分享到:QQ空間新浪微博騰訊微博人人網微信
                在線咨詢 我要報名
                热热色原网站