Vue元件間資料傳遞

walteronly1發表於2024-12-08
Vue元件

場景：

頁面中有搜尋、列表兩個元件，

搜尋元件傳出搜尋字串，需要流入列表元件，使用頁面做中轉。

searchbar 內部彈出searchevent：this.$emit('searchevent', val);
頁面定義searchprocess方法響應searchevent並接收引數，賦值給自身預定義變數。
頁面將自帶引數賦值後傳入列表元件的searchdata變數。
<body>
      <div class="container-fluid" id="run">
            <div class="row">
              <leftmenu></leftmenu>
                <div class="col">
                    <navibar></navibar>
                    <searchbar @searchevent="searchprocess"></searchbar>
                    <list :searchdata="searchparam"  :change="chgvar"></list>
                </div>
            </div>
            <foot></foot>
          </div>
<script>          
                var ur = '';
                var mn = new Vue({
                    el: '#run',
                    name: 'v',
                    data: {
                        searchparam: {},
                        chgvar: 0
                    },
                    methods: {
                        searchprocess: function(val) {
                            //console.log(val);
                            this.chgvar++;
                            this.searchparam = val;
                        }
                    }
                });
        </script>       
    </body>

　　

相關文章