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

<body><div id = 'app'><div><h3>正常的数据</h3><p>HTML特性不区分大小写。名字形式为camelCase的prop用作特性时，需要转为kebab-case（短横线隔开）</p></div><hr

宇智波幽助

3964人浏览 · 2017-11-28 17:22:01

宇智波幽助 · 2017-11-28 17:22:01 发布

<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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^