Vue2.0使用props传递数据【methods篇】

来源：互联网发布：知乎live500场百度云编辑：程序博客网时间：2024/06/09 23:49
<body>    <div id = 'app'>        <div>            <h3>{{title}}</h3>            <p>以下为组件内容：</p>        </div>        <hr>        <component name = 'component' :onclick = 'm_submit'></component>    </div>    <template id = 'component'>        <div>            <h3>{{component_title}}</h3>            <div>                <p><button @click = 'm_click'>点击</button></p>            </div>            <div>                <p>{{name}}</p>            </div>        </div>    </template>    <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>    <script type="text/javascript">        var COMPONENT = {            template : "#component",            // 用props把数据传给子组件            props : {                name : String,      // 这个不能忘记传递【通过整个媒介把子组件对象传递给了根元素】                onclick : Function            },            data : function(){                return {                    component_title : '组件名',                }            },            methods : {                m_click : function() {                    var _this = this ;                    console.log('触发了组件里的点击事件') ;                    console.log('异步函数外的this：', this) ;                    setTimeout(function() {                        console.log('准备开始执行onclick()事件了') ;                        console.log('异步函数里的this：', this) ;                        _this.onclick();                    }, 3000) ;                },                m_reset : function() {                    console.log('触发m_reset()方法了') ;                }            },            mounted : function() {                /**                 *  这边要把本组件对象传递给根元素。                 *  直接用Vue.set()方法就行了。                 *                   *  思路是：                 *  把本组件对象通过该组件的name属性的值component传递过去,                 *  这样根元素data里的component属性的值就是本组件对象了，                 *  也就是说根元素直接拿到了本组件对象。                 *  所以根元素届时可以通过data里的属性component调用本组件的m_reset方法。                 *  （面向对象编程）                 */                Vue.set(this.$root, this.name, this) ;                console.log('this：', this) ;                console.log('this.name：', this.name) ;                console.log('this.$root：', this.$root) ;            }        } ;        Vue.component('component', COMPONENT) ;        var _vm = new Vue({            data : {                title : 'Vue2.0使用props传递数据【methods篇】',                // component : null     //  这样写不容易理解                component : {}          //  这样写就容易理解了            },            methods : {                m_submit : function() {                    console.log('提交成功了~~~!') ;                    setTimeout(function(){                        console.log('数据返回了~~!') ;                        /**                         *  这边要调用子组件里的方法。                         *                           *  思路是：                         *  把整个子组件对象通过子组件的“name”的值component传递过来了,                         *  这样父组件data里的component属性的值就是整个子组件对象了，                         *  也就是说父组件直接拿到了整个子组件对象。                         *  所以通过component调用m_reset方法了。                         *  （面向对象编程）                         */                        _vm.component.m_reset() ;                     }, 3000) ;                }            }        }).$mount('#app');    </script></body>
阅读全文
0 0