Vue——常用组件

最新推荐文章于 2025-07-29 10:45:30 发布

转载最新推荐文章于 2025-07-29 10:45:30 发布 · 5.4k 阅读

文章标签：

#Vue

VUE 专栏收录该内容

4 篇文章

订阅专栏

<script src="../lib/vue.js"></script> 都要在头部导入包

1. 基础的基础

Component，Portlet

<body>
    <div id="my">
        <today-weather></today-weather>    //自定义组件
    </div>
    <script>
	 Vue.component('today-weather',{
            template:'<div>aaaaaaaaaaaaa</div>'
        });
        var my = new Vue({
            el:'#my'
        })
    </script>
</body>

在这里插入图片描述

2. 局部的组件

Vue.js的组件不仅可以单独声明注册使用，还可以在Vue实例中进行局部注册使用

<body>
    <div id="my">
        <my-weather></my-weather>
    </div>
    <script>
        var WeatherComponent = {
            template:'<div>123132121</div>'
        };
        var my = new Vue({
            el:'#my',
            data:{

            },
            components:{
                'my-weather':WeatherComponent
            }
        });
    </script>
</body>

在这里插入图片描述

3. 表行组件

<body>
    <div id="my">
        <h1>最期待的游戏是：</h1>
        <table border="1">
            <tr>
                <td>编号</td>
                <td>游戏名称</td>
            </tr>
            <tr is="my-row1"></tr>
          <tr is="my-row2"></tr>
          <tr is="my-row3"></tr>
        </table>
    </div>
    <script>
	Vue.component('my-row1',{
            template:'<tr><td>(1)</td><td>塞尔达传说：荒野之息</td></tr>'
        });
	Vue.component('my-row2',{
            template:'<tr><td>(2)</td><td>新马里奥赛车</td></tr>'
        });
	Vue.component('my-row3',{
            template:'<tr><td>(3)</td><td>喷射乌贼娘2代</td></tr>'
        });
        var my = new Vue({
            el:'#my',
            data:{},
            methods:{}
        });
    </script>
</body>

在这里插入图片描述

4. 组件中的数据

为Vue.js组件添加数据，使组件可以动态显示各种数据，注意是数据函数，不是数据属性

<body>
    <div id="my">
        <div>今天的天气是<today-weather/></div>
    </div>
    <script>
Vue.component('today-weather',{
            template:'<strong>{{todayWeather}}</strong>',
            data:function(){
                return {todayWeather:'雨加雪'};
            }
        });
        var my = new Vue({
            el:'#my',
        });
    </script>
</body>

在这里插入图片描述

5. 组件中的传递数据

可接受参数的组件

<body>
    <div id="my">
        <h1>成绩评价</h1>
        <test-resule :score="50"></test-resule>
        <test-resule :score="65"></test-resule>
        <test-resule :score="90"></test-resule>
        <test-resule :score="100"></test-resule>
    </div>
    <script>
 Vue.component('test-resule',{
            props:['score'],//表示可以接受什么样的参数
            template:'<div><strong>{{score}}分，{{testResult}}</strong></div>',
            computed:{
                testResult:function(){
                    var strResult = "";
                    if(this.score<60)
                        strResult = "不及格";
                    else if(this.score<90)
                        strResult = "中等生";
                    else if(this.score<=100)
                        strResult = "优等生";
                    return strResult;
                }
            }
        });
        var my = new Vue({
            el:'#my',
        });
    </script>
</body>

在这里插入图片描述

6. 传递变量

<body>
    <div id="my">
        <div>请输入名字：<input v-model="myname"></div>
        <hr>
        <say-hello :pname="myname"></say-hello>
    </div>
    <script>
	Vue.component('say-hello',{
            props:['pname'],
            template:'<div>你好，<strong>{{pname}}</strong></div>',
        });
        var my = new Vue({
            el:'#my',
            data:{
                myname:'aaa'
            }
        });
    </script>
</body>

在这里插入图片描述

7. 参数验证

<body>
    <div id="my">
        <h1>身世之谜</h1>
        <show-member-info name="aaa" :age="20" :detail="{address:'earth',language:'世界语'}"></show-member-info>
    </div>
    <script>
		Vue.component('show-member-info',{
            props:{
                name:{
                    type:String,
                    required:true,
                },
                age:{
                    type:Number,
                    validator:function(value){
                        return value>=0 && value <=130;
                    }
                },
                detail:{
                    type:Object,//数组类型
                    default:function(){
                        return{
                            address:'US',
                            language:'English'
                        };
                    }
                },
            },
            template:'<div>姓名：{{this.name}}<br/>'+
            '年龄：{{this.age}}岁<br/>'+
            '地址{{this.detail.address}}<br/>'+
            '语言{{this.detail.language}}</div>',
        });
        var my = new Vue({
            el:'#my',
        });
    </script>
</body>

在这里插入图片描述

8. 事件传递

v-on 侦听组件事件，当组件出发事件后进行事件处理
$emit 触发事件，并将数据提交给事件侦听者

<body>
    <div id="my">
        <h1>人生加法</h1>
        <add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
        <hr>
        <h3>{{result}}</h3>
        
    </div>
    <script>
	Vue.component('add-method',{
            props:['a','b'],
            template:'<div><button v-on:click="add">加吧</button></div>',
            methods:{
                add:function(){//子组件
                    var value =0;
                    value = this.a + this.b;
                    this.$emit('add_event',{//事件发送的形式传输给父组件
                        result:value
                    });
                }
            },
        });
        var my = new Vue({
            el:'#my',
            data:{
                result:0
            },
            methods:{
                getAddResult:function(pval){//作事件触发的第二个参数
                    this.result = pval.result;
                }
            },
        });
    </script>
</body>

在这里插入图片描述

9. slot插槽

slot是父组件与子组件的通讯方式，可以将父组件的内容显示在子组件当中

    <body>
        <div id="my">
            <say-to pname="aaa">111111</say-to>
            <say-to pname="bbb">222222</say-to>
            <say-to pname="ccc">333333</say-to>
        </div>
        <script>

	Vue.component('say-to',{
            props:['pname'],
            template:'<div>'
            +'你好,<strong>{{pname}}</strong>!'
            +'<slot></slot>'//显示子组件中的内容
            +'</div>',
        });
        var my = new Vue({
            el:'#my',
        });
    </script>
</body>

在这里插入图片描述
组合slot
在子组件中通过为多个slot进行命名，来接受父组件的不同内容的数据

<body>
    <div id="my">
        <nba-all-stars c="奥尼尔" pf="加内特">
            <span slot="sf">皮尔斯</span>
            <span slot="sg">雷阿伦</span>
            <span slot="pg">隆多</span>
        </nba-all-stars>
    </div>
    <script>
Vue.component('nba-all-stars',{
            props:['c','pf'],
            template:'<div>'
            +'<div>中锋：{{c}}</div>'
            +'<div>大前：{{pf}}</div>'
            +'<div>小前：<slot name="sf"></slot></div>'
            +'<div>分卫：<slot name="sg"></slot></div>'
            +'<div>控卫：<slot name="pg"></slot></div>'
            +'</div>',
        });
        var my = new Vue({
            el:'#my',
        });
    </script>
</body>

在这里插入图片描述