Vue.js组件——组件的基础知识

来源：互联网发布：淘宝评价语100字编辑：程序博客网时间：2024/05/17 07:53
这篇博客记录本人的学习的Vue.js框架组件的一些基础知识，记录的可能有点混乱。
如果有朋友想验证，可以直接copy代码，然后下载一个vue.min.js文件即可。
直接上代码：
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue 组件</title>        <script src="../js/vue.min.js"></script>    </head>    <body>        <h2>组件基础：prop基本用法，传递静态数据给组件</h2>        <div id="app">            <basic-test message='来自父组件的消息'></basic-test>        </div>        <p>----------------------------------------------------------------------------------</p>        <h2>组件基础：使用v-bind动态绑定数据到子组件</h2>        <div id="app1">            <input type="text" v-model="parentMessage">            <my-component :message="parentMessage"></my-component>                                          <local-component :message='message'></local-component>        </div>        <p>----------------------------------------------------------------------------------</p>        <div><h2>上面都是全局组件，下面弄一个局部组件</h2></div>        <div id="app2">            <local-component :message='message'></local-component>        </div>        <p>----------------------------------------------------------------------------------</p>        <h2>这里是验证组件的data属性</h2>        <div id="app3">            <component-data ></component-data>        </div>        <p>----------------------------------------------------------------------------------</p>        <h2>组件的通信</h2>        <p>之前已经验证过了父组件向子组件传递数据（通过子组件的props属性）。</p>        <p>子组件向父组件传递数据，则需要使用自定义事件，子组件通过$emit()来触发自定义的事件，父组件在子组件出现的位置使用v-on来监听子组件的事件，数据就通过自定义事件来传递。</p>        <div id="app4">            <child-component @postmessage="receiveMsg"></child-component>            <div>这里显示来自子组件的信息： {{ message }}</div>>        </div>        <p>----------------------------------------------------------------------------------</p>        <h2>这里尝试使用v-model向父组件绑定值</h2>        <p>验证是否只有当子组件的自定义事件的名称是input时，才能使用v-model</p>        <h4>首先，自定义事件的名称是input</h4>        <div id="app5">            <child-component2 v-model="message"></child-component2>            <div>这里显示来自子组件的信息： {{ message }}</div>        </div>        <h4>然后，自定义事件的名字是abc</h4>        <div id="app6">            <child-component3 v-model="message"></child-component3>            <div>这里显示来自子组件的信息： {{ message }}</div>        </div>        <h4>验证结果：</h4>        <p>确实只有当子组件自定义事件的名称是input时，才能使用v-model将子组件的数据传递给父组件。</p>        <script>             Vue.component('basic-test',{                props:['message'],                template:'<div>{{ message }}</div>'            });            Vue.component('my-component',{                props:['message'],                template:'<div> {{message}} </div>'            });            Vue.component('component-data',{                data:function(){                   return {                       message:'我是组件里面的data!'                   };                },                template:'<div>{{ message }}</div>'            });            Vue.component('child-component',{                data:function(){                    return {                        msg:'child-component data!'                    }                },                template:'<div>子组件的输入框：<input type="text" v-model="msg"><p>这里显示子组件的消息：{{ msg }}</p><input type="button" @click="sendMsg" value="发送消息"></div>',                 methods:{                    'sendMsg':function(){                        this.$emit('postmessage',this.msg,'007');                     }                }            });            Vue.component('child-component2',{                data:function(){                    return {                        msg:'child-component data!'                    }                },                template:'<div>子组件的输入框：<input type="text" v-model="msg"><p>这里显示子组件的消息：{{ msg }}</p><input type="button" @click="sendMsg" value="发送消息"></div>',                 methods:{                    'sendMsg':function(){                        this.$emit('input',this.msg);                     }                }            });            Vue.component('child-component3',{                data:function(){                    return {                        msg:'child-component data!'                    }                },                template:'<div>子组件的输入框：<input type="text" v-model="msg"><p>这里显示子组件的消息：{{ msg }}</p><input type="button" @click="sendMsg" value="发送消息"></div>',                 methods:{                    'sendMsg':function(){                        this.$emit('abc',this.msg);                     }                }            });            var app_basic = new Vue({                el:'#app'            });            var app = new Vue({                el:'#app1',                data:{                    parentMessage:'Please input something.',                    message:'app2的局部组件能在这里渲染么？'                }            });            var app2 = new Vue({                el:"#app2",                data:{                    message:'局部组件的消息'                },                components:{                    'local-component':{                        props:['message'],                        template:'<div><p>这是个局部组件</p><p>{{ message }}</p></div>'                    }                }            });            var app3 = new Vue({                el:'#app3'            });            var app4 = new Vue({                el:'#app4',                data:{                    message:''                },                methods:{                    'receiveMsg':function(msg,aa){                        this.message = msg + "/" + aa;                    }                }            });            var app5 = new Vue({                el:'#app5',                data:{                    message:''                }            });            var app6 = new Vue({                el:'#app6',                data:{                     message:''                }            });        </script>    </body></html>
阅读全文
0 0