Vue中的组件如何使用

组件

1、组件参数的data值必须是函数
2、组件模板必须是单个跟元素
3、组件模板的内容可以是模板字符串
’注意事项’

• 如果使用驼峰式命名组件,那么在使用组件的时候,只能在模板字符串中使用驼峰命名法
• 在普通的标签模板中,必须使用短横线的方式使用组件

• 全局组件
• 局部组件
• Prop传递数据
• 练习

全局组件

关键词:component
语法:

 Vue.component('组件名称',{
        data:function(){
            return{
                
            }
        },
        template:``
    })

测试

在普通的标签模板中,必须使用短横线的方式使用组件
还可以添加点击事件,事件写在template下方加个methods,与传统写法一样（此处未演示）

	<div id="app">
        <hello-world></hello-world>
    </div>

Vue.component('HelloWorld',{
        data:function(){
            return{
                msg:'helloworld'
            }
        },
        template:`<p>{{msg}}</p>`
    })

效果图:

网页会显示msg的信息,用p标签包裹着

局部组件

关键词:components
语法:

var vm=new Vue({
        el:'#app',
        data:{
            
        },
        components:{
            '组件名称':组件代码
        }
    })

测试

使用变量接收创建的组件

 <div id="app">
        <peng-ke></peng-ke>
    </div>

 var pengke={
        data:function(){
            return {
                msg:'你好,pengke'
            }
        },
        template:`<h3>{{msg}}</h3>`
    }
     var vm=new Vue({
        el:'#app',
        data:{
            
        },
        components:{
            'peng-ke':pengke
        }
    })

效果图:

网页会显示msg的信息,用h3标签包裹着

Prop传递数据

关键词:props
语法:

	Vue.component('组件名',{
       props:[属性名],
       template:''
   })

测试1(父组件传给子组件数据)

测试多种数据类型传递

 <h1>父组件-->prop--->传数据给子组件</h1>
    <div id="app">
        <blog title="今天星期一"></blog>
        <blog :title="msg" :context="info" :like="num" :flag="flag" :sz="sz" :obj="obj"></blog>
    </div>

Vue.component('blog',{
       props:['title','context','like','flag','sz','obj'],
       template:
       `
       <div>
        <h3>标题:{{title}}</h3>
        <span>点赞数:{{like}}</span>
        <span>{{flag}}</span>
        <pro>{{context}}</pro>
        <ol>
        <li v-for='item,i in sz'>{{item}}</li>
        </ol>
        <ul>
        <li v-for='item,k,v in obj'>{{item}}</li>
        </ul>
       </div>
       `
   })
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'动态标题',
            info:'正文.......',
            num:3,
            flag:true,
            sz:['苹果','香蕉','香梨','橘子'],
            obj:{
                name:'碰磕',
                age:18
            }
        }
    })

效果图:

成功传递数据,动态数据显示完成…

---

测试2(子组件传给父组件数据)

通过加自定义事件传递数据
关键词:$emit(自定义事件名，参数值)

<h1>子组件-->prop--->传数据给父组件</h1><!--加自定义事件$emit(自定义事件名称)-->
    <div id="app">
        <menu-item :params="sz" @change-item="change"></menu-item>
    </div>

//菜单组件  --子
   Vue.component('menu-item',{
       props:['params'],
       template:
       `
        <div>
            <ul>
                <li v-for='item in params'>
                    {{item}}
                </li>    
            </ul>    
            <button @click="$emit('change-item','碰磕')">改变</button>
        </div>
       `
   })
   // -- 父
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'父组件',
            sz:['苹果','香蕉','香梨','橘子'],
            fontsize:10
        },
        methods:{
            change(v){
            //v得到为碰磕
                this.$set(this.sz,0,'提莫');
            }
        }
    })

🚀该案例实现子组件调用事件通知父组件改变数组第一项的值
流程

• 子组件模板绑定事件$emit('.....',参数)
• dom节点绑定对应的事件,事件名与$emit括号内的名称一样
• 最后在vue对象中添加方法执行对应的操作

练习

🚀设计一个博客组件

• 标题.作者.正文.日期.图片列表 当做参数传入
• 加入边框样式

css

        .box{
            border: 1px double red;
            margin-left: 40%;
            width: 400px;
        }
        .box h1{
            color: gray;
            text-align: center;
        }
        .box .anthor{
            color: red;
            margin-left: 40%;
        }
        .box .data{
            color: yellowgreen;
            margin-left: 60%;
        }

html

<div id="app">
        <blog :list="list"></blog>
    </div>

js
imglist自己根据图片放置的位置修改…

Vue.component('blog',{
       props:['list'],
       template:
       `
       <div class='box'>
            <h1>{{list.title}}</h1><span class='anthor'>作者:{{list.anthor}}</span>
            <div>{{list.context}}</div>
            <ol>
                <li v-for='item,i in list.imglist'><img :src=item width=50 height=50 /></li>    
            </ol>
            <span class='data'>发表日期:{{list.data}}</span>
       </div>
       `
   })
    var vm=new Vue({
        el:'#app',
        data:{
            list:{
            msg:'文章标题',
            anthor:'李白',
            context:`正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。
正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。
正则表达式是繁琐的，但它是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的成就感。只要认真阅读本教程，加上应用的时候进行一定的参考，掌握正则表达式不是问题。
许多程序设计语言都支持利用正则表达式进行字符串操作。`,
            imglist:['./img/chunyu01.png','./img/chunyu02.png','./img/chunyu03.png'],
            data:'2022/3/7'
            }
        }
    })

效果图

组件练习完结~