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

最新推荐文章于 2023-12-20 20:58:11 发布

伏枫Urie

最新推荐文章于 2023-12-20 20:58:11 发布

阅读量929

点赞数

分类专栏：前端前端框架文章标签：前端 vue-js

本文链接：https://blog.csdn.net/weixin_39420106/article/details/78507141

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端框架

5 篇文章 0 订阅

订阅专栏

这篇博客记录本人的学习的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>