三:Vue组件

最新推荐文章于 2024-07-24 13:33:51 发布

是翼不是一

最新推荐文章于 2024-07-24 13:33:51 发布

阅读量306

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Hhytyq/article/details/104703392

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一:组件注册

语法:

Vue.component(组件名称，{
data:组件数据,
template:组件模板内容
}）

注意：data值必须是一个函数。
组件模板内容必须是单个跟元素。
组件模板内容可以是模板字符串。
1）模板字符串需要浏览器提供支持(ES6语法)

例子:

//定义一个名为button-counter的新组件
Vue.component('button-counter',{
data:function(){
return{
	count:0
}
},
template:'<button v-on:click='count++">点击了{{count}}次.</button>'
})

组件用法:

<div id="app">
<button-countr></button-counter>
</div>

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <button-counter></button-counter>
</div>
<script type="text/javascript">
    /*
        组件注册
    */
    Vue.component('button-counter',{
        data:function () {
            return{
                count:0
            }
        },
        template:'<button @click="handle">点击{{count}}次</button>',
        methods:{
            handle:function () {
                this.count++;
            }
        }
    })
    var vm =new Vue({
       el:'#app',
       data:{

       }
    });
</script>
</body>
</html>

组件命名方式:
短横线方式:

Vue.component('my-component',{})

驼峰方式:

Vue.component('MyComponent',{})

2:局部组件注册

var ComponentA={}
var ComponentB={}
var ComponentC={}
new Vue({
el:'#app',
components:{
	'component-a':ComponentA,
	'component-b':ComponentB,
	'component-c':ComponentC,
}
}
)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <hello-world></hello-world>
    <hello-tom></hello-tom>
    <hello-jerry></hello-jerry>
</div>
<script type="text/javascript">
    /*
        局部组件注册
        局部组件只能在注册他的父组件中使用。
    */
    var HelloWorld={
        data:function () {
            return {
                msg:'HelloWorld'
            }
        },
        template:'<div>{{msg}}</div>'
    }
    var HelloTom={
        data:function () {
            return{
                msg:'HelloTom'
            }
        },
        template:'<div>{{msg}}</div>'
    }
    var HelloJerry={
        data:function () {
            return{
                msg:'HelloJerry'
            }
        },
        template:'<div>{{msg}}</div>'
    }
    var vm=new Vue({
       el:'#app',
        components:{
           'hello-world':HelloWorld,
            'hello-tom':HelloTom,
            'hello-jerry':HelloJerry
        }
    });
</script>
</body>
</html>

Vue调试工具安装
1：克隆仓库
2:：安装依赖包
3：构建
4：打开Chrome扩展页面。
5：选择开发模式
6：加载已解压的扩展，选择shells/chrome
父组件向子组件传递值。

1.组件内部通过props接收传递过来的值.

Vue.component('menu-item',{
props:['title'],
template:'<div>{{title}}</div>'
})

2:父组件通过属性将值传递给子组件

<menu-item title="来自父组件的数据"><menu-item>
<menu-item :title="title"></menu-item>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
 <div id="app">
     <div>{{pmsg}}</div>
     <menu-item :menu-title='ptitle'></menu-item>
 </div>
<script type="text/javascript">
    /*
        父组件向子组件传值-属性名规则。
    */
    Vue.component('third-com',{
       props:['testTitle'],
       template:'<div>{{testTitle}}</div>'
    });
    Vue.component('menu-item',{
       props:['menuTitle'],
       template:'<div>{{menuTitle}}<third-com testTitle="hello"></third-com></div>'
    });
    var vm =new Vue({
       el:'#app',
       data:{
           pmsg:'父组件中内容',
           ptitle:'动态绑定属性'
       }
    });
</script>
</body>
</html>

props属性值类型；

字符串 String
数值 Number
布尔值Boolean 
数值  Array
对象 Object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{pmsg}}</div>
    <menu-item :pstr='pstr' :pnum='12' :pboo=true :parr='parr' :pobj='pobj'></menu-item>
</div>
<script type="text/javascript">
    Vue.component('menu-item',{
       props:['pstr','pnum','pboo','parr','pobj'],
       template: `
        <div>
          <div>{{pstr}}</div>
          <div>{{12 + pnum}}</div>
          <div>{{typeof pboo}}</div>
          <ul>
            <li :key='index' v-for='(item,index) in parr' :pobj='pobj'>{{item}}</li>
          </ul>
            <span>{{pobj.name}}</span>
            <span>{{pobj.age}}</span>
          </div>
        </div>
      `
    });
    var vm =new Vue({
       el:'#app',
       data:{
           pmsg:'父组件中内容',
           pstr:'hello',
           parr:['apple','orange','banana'],
           pobj:{
               name:'list',
               age: 12
           }
       }
    });
</script>
</body>
</html>

在这里插入图片描述
子组件向父组件传值
1.子组件通过自定义事件向父组件传递信息。

<button v-on:click='$emit("enlarge-text")'>扩大字体</button>

2.父组件监听子组件的事件

<menu-item v-on:enlarge-text='fontSize+=0.1'><menu-item>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div :style='{fontSize:fontSize+"px" }'>{{pmsg}}</div>
    <menu-item :parr='parr' @enlarge-text='handle'></menu-item>
</div>
<script type="text/javascript">
    /*
       子组件向父组件传值--基本用法
       props传递数据原则:单向数据流(只允许父组件向子组件传值，不允许子组件向父组件传值).
    */
    Vue.component('menu-item',{
       props:['parr'],
     template: `
     <div>
            <ul>
            <li :key='index' v-for='(item,index in parr'>{{item}}</li>
            </ul>
            <button @click='parr.push("lemon")'>点击</button>
            <button @click='$emit("enlarge-text")'>扩大父组件字体大小</button>
    </div> `
    });
    var vm =new Vue({
        el:'#app',
        data:{
            pmsg:'组件中内容',
            parr:['apple','orange','banana'],
            fontSize:10
        },
        methods:{
            handle:function () {
                //扩大字体大小
                this.fontSize+=5;
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述
3:子组件通过子定义事件向父组件传递信息：

<button v-on:click='$emit("enlarge-text",0.1)'>扩大字体</button>

4:父组件监听子组件的事件

<menu-item v-on:enlarge-text='fontSize+=$event'></menu-item>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div :style='{fontSize:fontSize+"px" }'>{{pmsg}}</div>
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
</div>
<script type="text/javascript">
    /*
       子组件向父组件传值--基本用法
       props传递数据原则:单向数据流(只允许父组件向子组件传值，不允许子组件向父组件传值).
    */
    Vue.component('menu-item',{
       props:['parr'],
     template: `
     <div>
            <ul>
            <li :key='index' v-for='(item,index in parr'>{{item}}</li>
            </ul>
            <button @click='parr.push("lemon")'>点击</button>
            <button @click='$emit("enlarge-text",10)'>扩大父组件字体大小</button>
            <button @click='$emit("enlarge-text",5)'>扩大父组件字体大小</button>
    </div> `
    });
    var vm =new Vue({
        el:'#app',
        data:{
            pmsg:'组件中内容',
            parr:['apple','orange','banana'],
            fontSize:10
        },
        methods:{
            handle:function (val) {
                //扩大字体大小
               this.fontSize+=val;
            }
        }
    });
</script>
</body>
</html>

非父子组件间传值
1.单独的事件中心管理组件间的通信
在这里插入图片描述
1:单独的事件中心管理组件间的通信

var eventHub =new Vue()

2:监听事件与销毁事件

eventHub.$on('add-todo',addTodo)
eventHub.$off(add-todo)

3:触发事件

eventHub.$emit('add-todo',id)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>父组件</div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
</div>
<script type="text/javascript">
    /*
        兄弟组件之间数据传递
     */
    /*
        提供事件中心
    */
    var hub = new Vue();

    Vue.component('test-tom',{
        data:function () {
            return{
                num:0
            }
        },
       template:'<div>\n' +
       '          <div>TOM:{{num}}</div>\n' +
       '          <div>\n' +
       '            <button @click=\'handle\'>点击</button>\n' +
       '          </div>\n' +
       '        </div>',
        methods:{
            handle:function () {
                hub.$emit('jerry-event',2);
            }
        },
        mounted:function () {
           //监听事件
           hub.$on('tom-event',(val) =>{
                this.num+=val;
            });
        }
    });
    Vue.component('test-jerry',{
        data:function () {
            return{
                num:0
            }
        },
        template:'<div>\n' +
        '          <div>Jerry:{{num}}</div>\n' +
        '          <div>\n' +
        '            <button @click=\'handle\'>点击</button>\n' +
        '          </div>\n' +
        '        </div>',
        methods:{
            handle:function () {
                //触发兄弟组件的事件
                hub.$emit('tom-event',1);
            }
        },
        mounted:function () {
            //监听事件
            hub.$on('jerry-event',(val) =>{
                this.num+=val;
            });
        }
    });
    var vm =new Vue({
       el:'#app',
       data:{

       }
    });
</script>
</body>
</html>

组件插槽的作用
在这里插入图片描述
组件插槽基本用法:
1.插槽位置

Vue.component('alert-box',{
	template:'
		<div class="demo-alert-box">
			<strong>Error!<strong>
			<slot></slot>//名字固定
		<div>
		'
		})

2:插槽内容

<alert-box>something bad happened.</alert-box>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <alert-box>有bug发生</alert-box>
    <alert-box>有一个警告</alert-box>
</div>
<script type="text/javascript">
    /*
        组件插槽
    */
    Vue.component('alert-box',{
        template:'<div><strong>ERROR:</strong><slot> 默认内容</slot></div>'
    });
    var vm =new Vue({
       el:'#app',
       data:{

       }
    });
</script>
</body>
</html>

具名插槽用法:
1.插槽定义

<div class="container"
	<header>
		<slot name="header‘></slot>
	<header>
	<main
		<slot></slot>
	</main>
	<footer>
		<slot name="footer"></slot>
	</footer。
</div>

2:插槽内容

<base-layout>
	<h1 slot="header">标题内容<h1>
	<p>主要内容1</p>
	<p>主要内容</p>
	
	<p solt="footer">底部内容</p>
</base-layout>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <base-layout>
        <p slot='header'>标题信息</p>
            <p>主要内容1</p>
            <p>主要内容2</p>
        <p slot='footer'>底部信息</p>
    </base-layout>
    <base-layout>
        <template slot='header'>
            <p>标题信息1</p>
            <p>标题信息2</p>
        </template>
        <p>主要内容1</p>
        <p>主要内容2</p>
        <template sslot='footer'>
            <p>标题信息1</p>
            <p>标题信息2</p>
        </template>
    </base-layout>
</div>
<script type="text/javascript">
    /*
        具名插槽
    */
    Vue.component('base-layout',{
        template:'<div><header><slot name="header"></slot></header><main><slot ></slot></main><footer><slot name="footer"></slot></footer></div>'
    })
</script>
</body>
</html>

在这里插入图片描述
作用域插槽
应用场景:父组件对子组件的内容进行加工处理。
1.插槽定义

<ul>
	<li v-for="item in list" v-bind:key=item.id">
		<slot v-bind:item="item">
			{{item.name}}
		</solt>
	</li>
</ul>

2.插槽内容

<fruit-list v-bind:list="list">
	<template slot-scope="slotProps">
		<strong v-if="slotProps.item.current">
		{{slotProps.item.text}}
		</strong>
	</template>
</fruit-list>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style type="text/css">
        .current {
            color: orange;
        }
    </style>
</head>
<body>
<div id="app">
    <fruit-list :list='list'>
        <template slot-scope='slotProps'>
            <strong v-if='slotProps.info.id==2' class="current">{{slotProps.info.name}}</strong>
            <span v-else>{{slotProps.info.name}}</span>
        </template>
    </fruit-list>
</div>
<script type="text/javascript">
    /*
        作用域插槽
    */
    Vue.component('fruit-list',{
        props:['list'],
        template:'<div><li :key="item.id" v-for="item in list"><slot :info="item">{{item.name}}</slot></li></div>'
    });
    var vm =new Vue({
       el:'#app',
       data:{
            list:[{
                id:1,
                name:'apple'
            },{
                id:2,
                name:'orange'
            },{
                id:3,
                name:'banana'
            }]
       }
    });
</script>
</body>
</html>

在这里插入图片描述

二：案例：购物车

1.按照组件化方式实现业务需求

根据业务功能进行组件划分
1):标题组件(展示文本)
2):列表组件(列表展示，商品数量变更，商品删除)
3):结算组件(计算商品总额)

1：功能实现步骤

实现整体布局和样式效果
划分独立的功能组件
组合所有的子组件形成整体结构
逐个实现各个组件功能
	标题组件
	列表组件
	结算组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .container {
        }
        .container .cart {
            width: 300px;
            margin: auto;
        }
        .container .title {
            background-color: lightblue;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*color: #fff;*/
        }
        .container .total {
            background-color: #FFCE46;
            height: 50px;
            line-height: 50px;
            text-align: right;
        }
        .container .total button {
            margin: 0 10px;
            background-color: #DC4C40;
            height: 35px;
            width: 80px;
            border: 0;
        }
        .container .total span {
            color: red;
            font-weight: bold;
        }
        .container .item {
            height: 55px;
            line-height: 55px;
            position: relative;
            border-top: 1px solid #ADD8E6;
        }
        .container .item img {
            width: 45px;
            height: 45px;
            margin: 5px;
        }
        .container .item .name {
            position: absolute;
            width: 90px;
            top: 0;left: 55px;
            font-size: 16px;
        }

        .container .item .change {
            width: 100px;
            position: absolute;
            top: 0;
            right: 50px;
        }
        .container .item .change a {
            font-size: 20px;
            width: 30px;
            text-decoration:none;
            background-color: lightgray;
            vertical-align: middle;
        }
        .container .item .change .num {
            width: 40px;
            height: 25px;
        }
        .container .item .del {
            position: absolute;
            top: 0;
            right: 0px;
            width: 40px;
            text-align: center;
            font-size: 40px;
            cursor: pointer;
            color: red;
        }
        .container .item .del:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <my-cart></my-cart>
    </div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">

    var CartTitle = {
        props:['uname'],
        template: `
        <div class="title">{{uname}}的商品</div>
      `
    }
    var CartList = {
        props:['list'],
        template: `
        <div>
          <div :key="item.id" v-for="item in list" class="item">
            <img :src="item.img"/>
            <div class="name">{{item.name}}</div>
            <div class="change">
              <a href="" @click.prevent="sub(item.id)">－</a>
              <input type="text" class="num" :value="item.num" @blur="changeNum(item.id,$event)"/>
              <a href="" @click.prevent="add(item.id)">＋</a>
            </div>
            <div class="del" @click="del">×</div>
          </div>
        </div>
      `,
        methods:{
            del:function (id) {
                console.log(id);
                //把id转递给父组件
                this.$emit('cart-del',id);
            },
            changeNum:function (id,event) {
                console.log(id,event.target.value);
                this.$emit('change-num',{
                   id:id,
                    type:'change',
                   num:event.target.value
                });
            },
            sub:function (id) {
                this.$emit('change-num',{
                    id:id,
                    type:'sub'
                })
            },
            add:function (id) {
                this.$emit('change-num',{
                    id:id,
                    type:'add'
                })
            }
        }
    }
    var CartTotal = {
        props:['list'],
        template: `
        <div class="total">
          <span>总价：{{total}}</span>
          <button>结算</button>
        </div>
      `,
        computed:{
            total:function () {
                //计算商品的总价
                var t=0;
                this.list.forEach(item =>{
                   t+=item.price*item.num;
                });
                return t;
            }
        }
    }
    Vue.component('my-cart',{
        data:function(){
          return{
              uname:'张三',
              uname: '张三',
              list: [{
                  id: 1,
                  name: 'TCL彩电',
                  price: 1000,
                  num: 1,
                  img: 'img/a.jpg'
              },{
                  id: 2,
                  name: '机顶盒',
                  price: 1000,
                  num: 1,
                  img: 'img/b.jpg'
              },{
                  id: 3,
                  name: '海尔冰箱',
                  price: 1000,
                  num: 1,
                  img: 'img/c.jpg'
              },{
                  id: 4,
                  name: '小米手机',
                  price: 1000,
                  num: 1,
                  img: 'img/d.jpg'
              },{
                  id: 5,
                  name: 'PPTV电视',
                  price: 1000,
                  num: 2,
                  img: 'img/e.jpg'
              }]
            }
        },
        template: `
        <div class='cart'>
          <cart-title :uname="uname"></cart-title>
          <cart-list :list="list" @change-num="changNum($event)" @cart-del="delCart($event)"></cart-list>
          <cart-total :list="list"></cart-total>
        </div>
      `,
        components: {
            'cart-title': CartTitle,
            'cart-list': CartList,
            'cart-total': CartTotal
        },
        methods:{
            changNum:function(val){
                //分为三种情况 1：输入域变更，2加号变更 3:减号变更
                if(val.type=='change'){
                    //根据子组件传递过来的数据，更新list中对应的数据。
                    this.list.some(item =>{
                        if(item.id==val.id){
                            item.num=val.num;
                            //终止遍历
                            return true;
                        }
                    });
                }else if(val.type=='sub'){
                    //减一操作。
                   this.list.some(item =>{
                       if(item.id==val.id){
                           item.num-=1;
                           //终止遍历
                           return true;
                       }
                   });
                }else if(val.type=='add'){
                    //加一操作
                    this.list.some(item =>{
                        if(item.id==val.id){
                            item.num+=1;
                            //终止遍历
                            return true;
                        }
                    });
                }

            },
            delCart:function (id) {
                //根据id删除list对应的数据。
                //1.找到id对应数据的索引。
                    var index =this.list.findIndex(item =>{
                       return item.id =id;
                    });
                //2.根据索引删除对应数据
                this.list.splice(index,1);

            }
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {

        }
    });

</script>
</body>
</html>