zoukankan      html  css  js  c++  java
  • Vue-组件

    组件

    组件概念:

    ​ html、css与js的集合,为该集合体命名,用该名字复用html、css与js组成的集合体构成复用性。

    组件分类:

    ​ 根组件:new Vue()生成的组件

    ​ 局部组件:组件名={},{}内部采用的是部Vue语法

    ​ 全局组件:Vue.component(‘组件名’,{}),{}内部采用的是Vue语法

    组件的特点:

    ​ 1、组件都有管理组件HTML页面结果的template实例成员,template中有且只有一个根标签;

    ​ 2、根组件都是作为最顶级层的父组件,局部与全局组件作为子组件,也可以成为其他局部与全局父组件;

    ​ 3、子组件的数据需要隔离(数据组件化,每一个组件拥有自己的数据独立名称空间);

    ​ 4、局部组件必须注册后才能使用,全局组件不需要注册,提倡使用局部组件

    下面看一个小例子

    <div id="app">
        {{msg}}
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'信息组件 '
            },
            template:'<p>{{msg}}</p>>'
        })
    </script>
    

    上面的{{msg}}被下面的template内的p标签替换了

    局部组件与全局组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body,h2{
                margin: 0;
            }
            .warp{
                 800px;
                margin: 0 auto;
            }
            .warp:after{
                content: '';
                display: block;
                clear: both;
            }
            .box{
                 200px;
                border-radius: 10px;
                overflow: hidden;
                background-color: peachpuff;
                float: left;
                margin: 10px;
            }
            .box img{
                 100%;
            }
            .box h2{
                text-align: center;
                font-weight: normal;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <div class="warp">
            <!--渲染组件-->
            <local-tag></local-tag>
            <local-tag></local-tag>
            <local-tag></local-tag>
      
            <global-tag></global-tag>
            <global-tag></global-tag>
            <global-tag></global-tag>
    
        </div>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        //声明局部组件:局部组件要在其父组件中注册才能使用
        //1、声明组件,2、注册组件,3、渲染组件,全局组件不需注册
    
        //声明局部组件
        let localTag={
            template:`
            <div class="box" @click="fn">
                <img src="img/001.jpg" alt="">
                <h2>焰灵姬</h2>
             </div>>
    
            `,
        };
        //声明全局组件
        Vue.component('global-tag',{
            template:`
            <div class="box">
            <img src="img/002.jpg" alt="">
            <h2>紫女</h2>
            </div>
            `,
        });
        new Vue({
            el:'#app',
            data:{},
            components:{  //注册组件
                localTag,
            }
        })
    </script>
    </html>
    

    其效果为:

    组件传值(父传子):

    父传子:

    ​ 1、子组件可以通过props自定义组件属性(采用反射机制,需要填写的字符串,但是使用时可以直接作为变量)。

    ​ 2、子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,将可以将变量值传递给子组件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body, h2 {
                margin: 0;
            }
            .wrap {
                 880px;
                margin: 0 auto;
            }
            .wrap:after {
                content: '';
                display: block;
                clear: both;
            }
            .box {
                 200px;
                border-radius: 10px;
                overflow: hidden;
                background-color: #eee;
                float: left;
                margin: 10px;
            }
            .box img {
                 200px;
                height: 240px;
            }
            .box h2 {
                text-align: center;
                font-weight: normal;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <div class="warp">
        <local-tag v-for="dog in dogs" :dog="dog" def="父传子的对象..." :xyz="dog.name"></local-tag>
        </div>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        let dogs=[
            {
                name:'二哈一号',
                img:'img/100.jpg',
            },         {
                name:'二哈二号',
                img:'img/200.jpg',
            },         {
                name:'二哈三号',
                img:'img/300.jpg',
            },         {
                name:'二哈四号',
                img:'img/400.jpg',
            },
        ];
        let localTag={// 1)子组件可以通过props自定义组件属性(采用反射机制,需要填写字符串,但是使用时可以直接作为变量)
            // 2)子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,将可以将变量值传递给子组件
            props:['dog','def','xyz'],
    
            template:`
            <div class="box" @click="fn">
            <img :src="dog.img" alt="">
            <h2>打了{{dog.name}}{{count}}下</h2>
            </div>
            `,
            data(){
                return{
                    count:0,
                }
            },
            methods:{
                fn(){
                    console.log(this.dog);
                    this.count++;
                }
            }
        };
        new Vue({
            el:'#app',
            data:{
                dogs,
            },
            components:{
                localTag,
            }
        });
    </script>
    </html>
    

    组件传值(子传父)

    自定义事件是属于子组件的,子组件在父组件中渲染并绑定事件方法,所以事件方法由父组件实现;子组件如何触发自定义事件:this。$emit(‘自定义事件名’,触发事件回调的参数们)。

    子组件触发自定义事件,携带出子组件的内容,在父组件中实现自定义事件的方法,拿到组件传递给父组件的消息。

    下面看下代码,更好理解:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    <div id="app">
        <h1>{{h1}}</h1>
        <h3>{{h3}}</h3>
        <tag @action="actionFn"></tag>
        <hr>
        <tag2 @h1a="aFn1" @h3a="aFn3"></tag2>
    
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
    
    
        let tag={
            template:`
            <div>
            <input type="text" v-model="t1">
            <input type="text" v-model="t2">
            <button @click="changeTitle">修改标题</button>
            </div>
            `,
            data(){
                return{
                    t1:'',
                    t2:'',
                }
            },
            methods:{
                changeTitle(){
                    if (this.t1 && this.t2) {
                        //这里对父传值会使用一个非常重要的$emit,
                        this.$emit('action',this.t1,this.t2);
                        //传完值后将输入框中的值设置被空
                        this.t1='';
                        this.t2='';
                    }
                },
            }
        };
        let tag2 = {
            template: `
            <div>
                主标题内容:<input type="text" v-model="t1" @input="t1Fn">
                子标题内容:<input type="text" v-model="t2">
            </div>
            `,
            data() {
                return {
                    t1: '',
                    t2: '',
                }
            },
            methods: {
                t1Fn() {  //这里是在input的框中绑定oninput来时时监听传值,与watch监听事件有异曲同工之效。
                    this.$emit('h1a', this.t1);
                }
            },
            watch: {  //这里使用的时时监听来时时传值,,watch是监听事件
                t2 () {
                    this.$emit('h3a', this.t2);
                }
            }
        };
        new Vue({
            el:'#app',
            data:{
                h1:'主标题',
                h3:'子标题',
            },
            components:{
                tag,
                tag2
            },
            methods:{
                actionFn(a,b,c){
                    this.h1 = a;
                    this.h3 = b;
                },
                 aFn1(a) {
                    if (!a) {
                        this.h1 = '主标题';
                        return;
                    }
                    this.h1 = a;
                },
                aFn3(a) {
                    if (!a) {
                        this.h3 = '子标题';
                        return;
                    }
                    this.h3 = a;
                },
            }
        })
    </script>
    </html>
    
  • 相关阅读:
    文件读写
    使用HttpClient实现文件的上传下载
    TreeMap
    Linux的目录结构与文件权限
    Hibernate中get()和load()方法的区别
    Hibernate中openSession()与getCurrentSession()的区别与联系
    Hibernate核心类和接口
    Hibernate连接数据库
    Struts2中OGNL表达式的用法
    Struts2中Result的配置
  • 原文地址:https://www.cnblogs.com/mqhpy/p/12063992.html
Copyright © 2011-2022 走看看