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>

　　

posted @ 2024-12-08 19:22  walteronly1  阅读(24)  评论(0)    收藏  举报