组件化开发

最新推荐文章于 2023-06-09 13:46:56 发布
最新推荐文章于 2023-06-09 13:46:56 发布
阅读量253 收藏
点赞数
分类专栏： vue.js 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43728184/article/details/109525488
版权

vue-组件化

组件的使用分为三个步骤

  1. 创建组件构造器
    调用Vue.extend()方法创建组件构造器
  2. 注册组件
    调用Vue.component()方法注册组件
  3. 使用组件
    在Vue实例的作用范围内使用组件

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
    <!--使用组件-->
    <my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
  //1.创建组件构造器对象
  const cnpC = Vue.extend({
      template: `
        <div>
          <h2>我是标题</h2>
          <p>我是内容1</p>
          <p>我是内容2</p>
        </div>`
  })
  //2.注册组件
  Vue.component('my-cpn',cpnC)
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>
</body>
</html>

全局组件和局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body>
<div id="app">
    {{message}}
    <!--使用组件-->
    <my-cpn></my-cpn>
</div>
<div id="app2">
    <my-cpn></my-cpn>
</div>
<script src="js/vue.js"></script>
<script>
    //1.创建组件构造器对象
    const cpnC = Vue.extend({
        template: `
        <div>
          <h2>我是标题</h2>
          <p>我是内容1</p>
          <p>我是内容2</p>
        </div>`
    })
    //2.注册组件(全局组件，意味着可以在多个Vue的实例下面使用)
    Vue.component('my-cpn',cpnC)

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            //cpn使用组件时的标签名//2.注册组件(局部组件)
            cpn: cpnC
        }
    })
    const app2 = new Vue({
        el: '#app2',
    })
</script>
</body>
</html>

父组件和子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body>
<div id="app">
    {{message}}
    <!--使用组件-->
    <cpn2></cpn2>
</div>

<script src="js/vue.js"></script>
<script>
    //1.创建第一个组件构造器对象(子组件)
    const cpnC1 = Vue.extend({
        template: `
        <div>
          <h2>我是标题1</h2> 
          <p>我是内容1</p>
          <p>我是内容2</p>
        </div>`
    })
    //1.创建第二个组件构造器对象(父组件)
    const cpnC2 = Vue.extend({
        template: `
        <div>
          <h2>我是标题2</h2> 
          <p>我是内容1</p>
          <p>我是内容2</p>
        </div>`,
        components: {
            cpn1: cpnC1
        }
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            //cpn使用组件时的标签名  注册组件(局部组件)
            cpn2: cpnC2
        }
    })
</script>
</body>
</html>

语法糖格式

语法糖注册全局组件

//2.注册组件(全局组件，意味着可以在多个Vue的实例下面使用)
    Vue.component('my-cpn', {
        template: `
        <div>
          <h2>我是标题</h2>
          <p>我是内容1</p>
          <p>我是内容2</p>
        </div>
        `
    })

语法糖注册局部组件

const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            'cpn2': {
                template: `
                <div>
                    <h2>我是标题</h2>
                    <p>我是内容1</p>
                    <p>我是内容2</p>
                </div>
                `
            }
        }
    })

组件模板抽离写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body>
<div id="app">
    <cpn></cpn>
</div>

<!-- 1.script标签，注意：类型必须是text/x-template -->
<!-- <script type="text/x-template" id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容1</p>
        <p>我是内容2</p>
    </div>
</script> -->
<!-- 2.template标签 -->
<template id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容1</p>
        <p>我是内容2</p>
    </div>
</template>
<script src="js/vue.js"></script>
<script>
    //2.注册组件(全局组件，意味着可以在多个Vue的实例下面使用)
    Vue.component('cpn', {
        template: `#cpn`
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        }
    })
</script>
</body>
</html>

组件数据存放问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body>
<div id="app">
    <cpn></cpn>
</div>

<!-- 1.script标签，注意：类型必须是text/x-template -->
<!-- <script type="text/x-template" id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容1</p>
        <p>我是内容2</p>
    </div>
</script> -->
<!-- 2.template标签 -->
<template id="cpn">
    <div>
        <h2>{{title}}</h2>
        <p>我是内容1</p>
        <p>我是内容2</p>
    </div>
</template>
<script src="js/vue.js"></script>
<script>
    //2.注册组件(全局组件，意味着可以在多个Vue的实例下面使用)
    Vue.component('cpn', {
        template: '#cpn',
        data() {
            return {
                title: 'abc'
            }
        }
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        }
    })
</script>
</body>
</html>

父子组件的通信

通过props向子组件传递
通过事件向父组件发送消息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn :cmessage="message" :cmovies="movies"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>{{cmovies}}</h2>
    <p>{{cmessage}}</p>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    // props: ['cmovies', 'cmessage'],
    props: {
      // 提供一些默认值和类型限制,以及必传值
      cmessage: {
        type: String,
        default: 'bbbb',
        required: true
      },
      // 当类型是对象或者数组时，默认值必须是一个函数
      cmovies: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return{}
    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies: ['海王', '海贼王', '海尔兄弟']
    },
    components: {
        cpn
    }
  })
</script>

</body>
</html>

props数据验证所支持的数据类型
在这里插入图片描述
当我们又自定义构造函数时，验证也支持自定义的类型
在这里插入图片描述
props的驼峰表示写法
在这里插入图片描述

子传父

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn @btn-click="cpnClick"></cpn>
</div>
<template id="cpn">
  <div>
    <button v-for="item in apps" @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    data() {
      return{
        apps: [
          {id:'1',name:'学习强国'},
          {id:'2',name:'淘宝'},
          {id:'3',name:'知乎'},
          {id:'4',name:'抖音'}
        ]
      }
    },
    methods: {
      btnClick(item) {
        //发射事件
        this.$emit('btn-click',item)
      }
    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies: ['海王', '海贼王', '海尔兄弟']
    },
    components: {
        cpn
    },
    methods: {
      cpnClick(item) {
        console.log(item)
      }
    }
  })
</script>

</body>
</html>

父子间通信结合双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn :mesage1="message1"
       :mesage2="message2"
       @msg1change="msg1Change"
       @msg2change="msg2Change">
  </cpn>
</div>
<template id="cpn">
  <div>
    <h1>props:{{mesage1}}</h1>
    <h2>data:{{dmesage1}}</h2>
    <input type="text" :value="dmesage1" @input="msg1Input">
    <h1>props:{{mesage2}}</h1>
    <h2>data:{{dmesage2}}</h2>
    <input type="text" :value="dmesage2" @input="msg2Input">

  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    props: {
      mesage1: Number,
      mesage2: Number
    },
    data() {
      return{
        dmesage1:this.mesage1,
        dmesage2:this.mesage2
      }
    },
    methods: {
      msg1Input(event){
        // 将input中的value赋值到dnumber中
        this.dmesage1 = event.target.value;
        // 为了让父组件可以修改值，发出一个事件
        this.$emit('msg1change',this.dmesage1)

        // // 同时修改dmesage2的值
        // this.dmesage2 = this.dmesage1 * 100;
        // this.$emit('msg2change',this.dmesage2)
      },
      msg2Input(event){
        this.dmesage2 = event.target.value;
        this.$emit('msg2change',this.dmesage2)
        // // 同时修改dmesage1的值
        // this.dmesage1 = this.dmesage2 * 100;
        // this.$emit('msg1change',this.dmesage1)
      }
    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      message1: 1,
      message2: 2
    },
    components: {
      cpn
    },
    methods: {
      msg1Change(value){
        this.message1 = parseInt(value)
      },
      msg2Change(value){
        this.message2 = parseInt(value)
      }
    }
  })
</script>

</body>
</html>

父访问子的属性或方法children- refs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn ref="aaa"></cpn>
  <button @click="btnClick">按钮</button>
</div>
<template id="cpn">
  <div>
    <h1>111</h1>

  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    data() {
      return{
        name:'我是子组件的name'
      }
    },
    methods: {
      showMessage(){
        console.log('showMessage');
      }
    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    components: {
      cpn
    },
    methods: {
      btnClick(){
        // 1、$children
        // console.log(this.$children);
        // for(let c of this.$children){
        //   console.log(c.name);
        //   c.showMessage();
        // }
        //2 $ ref
        console.log(this.$refs.aaa.name);
      }
    }
  })
</script>

</body>
</html>

子访问父组件的属性或方法

用 p a r e n t 访 问 父 组 件 用 parent访问父组件 用 parent访问父组件用root访问根组件

插槽

（同一个组件显示不同数据）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn></cpn>
  <cpn>aaa</cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h1>111</h1>
    <slot><button>按钮</button></slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    data() {
      return{
      }
    },
    methods: {
    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    components: {
      cpn
    },
    methods: {
    }
  })
</script>

</body>
</html>

具名插槽的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn><span slot="center">标题</span></cpn>
  <cpn><button slot="left">1</button></cpn>
</div>
<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    data() {
      return{
      }
    },
    methods: {
    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    components: {
      cpn
    },
    methods: {
    }
  })
</script>

</body>
</html>

什么是编译作用域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
  <div>
    <span v-show="isShow">左边</span>
    <span>中间</span>
    <span>右边</span>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    data() {
      return{
        isShow: false
      }
    },
    methods: {
    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      isShow: true
    },
    components: {
      cpn
    },
    methods: {
    }
  })
</script>

</body>
</html>

作用域插槽的使用

父组件替换插槽的标签，但是内容由子组件来提供

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn></cpn>
  <cpn>
    <template slot-scope="slot">
      <span>{{slot.data.join(' - ')}}</span>
    </template>
  </cpn>
</div>
<template id="cpn">
  <div>
    <slot :data="pugs">
      <ul>
        <li v-for="i in pugs">{{i}}</li>
      </ul>
    </slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    data() {
      return{
        pugs:['java','c++','c#','javascript']
      }
    },
    methods: {
    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    components: {
      cpn
    },
    methods: {
    }
  })
</script>

</body>
</html>
陳妍儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 不同条件展示不同页面_Vue 指令 / 页面展示
weixin_42128315的博客
02-22 2247
页面展示基本指令v-text用于在页面中展示数据，可以简写为{{ }}的形式{{msg}}v-html同样是用于展示数据，与v-text区别相当于innerHtml和textContentv-pre用来在展示页面是跳过渲染某一段代码，该方法主要可以用来跳过没有指令的代码来提高加载速度{{msg}}v-once添加了该指令的元素/组件只会渲染一次，之后vue重新渲染时会直接跳过该元素/组件，即使我们...
Flutter组件化开发方案
01-27
这样可以有效的将Flutter和Native进行物理隔离，但随着Flutter承载的业务越来越多，与Native交互的接口变的越来越多，带来了很多管理问题，因此我们迫切需要采用新的开发模式，本文将介绍Flutter的组件化开发方案。...
Vue动态组件 ：is来显示不同的组件
前端打工人的博客
05-13 1839
在Vue中有一个 :is 特性， 组件可以用过 :is 来切换 <template> <div> // 按钮，用于切换组件。注意,此时的A为字符串而非变量 <button @click="showWhat = 'A'">showA</button> <button @click="showWhat = 'B'">showB</button> // 动态切换显隐，组件 <componen
vue根据返回不同字段显示不同的文字、颜色
bin_22的博客
06-09 923
【代码】vue根据返回不同字段显示不同的文字、颜色。
关于mybatis的config.xml配置文件
qq_44505797的博客
09-25 304
开发工具与关键技术： Java 作者：肖广斌 撰写时间：2020年9月25日 当我们在eclipse下载好mybatis的插件后，我们创建web项目的时候就可以引用mybatis框架了，所以我们需要配置一个mybatis的config.xml文件，让其来连接我们的数据库，关于配置开发环境有两种方式，我们可以导入外部文件也可以直接在mybatis的config.xml文件中配置我们的开发环境，如下图，第一种：这是通过外部文件配置开发环境，在外部文件中已经写好了url，driver，username，passw
vue 不同条件展示不同页面_js问题 当前页面根据上一页面的不同条件显示不同的div...
weixin_39887926的博客
12-21 998
页面1是测试页面，测试结束后得到测试结果，条件判断的都没问题，页面2是结果页，含有不同的div，页面2要根据页面1的结果显示不同的div，条件判断代码：if(jg[0]>=40||jg[1]>=40||jg[...页面1是测试页面，测试结束后得到测试结果，条件判断的都没问题，页面2是结果页，含有不同的div，页面2要根据页面1的结果显示不同的div，条件判断代码：if (jg[0] &...
Android组件化开发
01-03
什么是组件化开发 所谓组件化，就是将整个庞大的项目以业务逻辑进行拆分成多个模块，并且各个模块之间相互独立，相互解耦，每一个模块可以单独进行开发调试，各个模块调试完，以library的形式依赖在壳App中组合成一...
Vue组件化开发思考
08-28
主要介绍了Vue组件化开发的思考以及相关的原理介绍，如果你对此有兴趣，可以学习参考下。
ios组件化开发
06-20
ios组件化开发顺序分享，文档步骤详尽。学习组件化开发的手册
组件化开发实例
06-29
组件化开发实例，包含协议组件化、注册url组件化、动态创建
vue---el-table根据数据不同，展示不同的内容
maidu_xbd的博客
01-03 6295
需求描述：举例说明，由图一修改为图二的效果。下图状态为1则显示“启动”，状态为0则显示“禁用” （图一） （图二） 解决方法： <el-table-column prop="status" label="状态" width="150" align="center"> <template slot-scope="scope"&gt...
【Vue】根据点击单选项显示不同内容
DomCode
08-27 2345
<template> <div class="messageItem" style="height:540px;overflow-y:auto;"> <div class="oneMsg" style="font-size:18px"> <span class="case" >案件种类</span> <el-radio-group v-model="indexsty
Vue 实现切换单选按钮，在输入框显示不同的内容。
是秃子总会发光
04-11 3305
Vue 实现切换单选按钮，在输入框显示不同的内容。
vue 不同条件展示不同页面_vue.js - vue一个页面组件复用,数据不同
weixin_39548490的博客
12-21 1231
问 题我现在定义了一个父组件如下所示Vue.component('project',{ //定义父组件，在父组件内部注册子组件template:'data:function(){return {items:projectArray}},components:{'project-list':projectList}});子组件不说了，一个页面上想多处用这个父组件，只是数据不用，即projectAr...
vue 控制组件在不同页面的显示
XL_0502的博客
03-30 914
我们可以将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。可以使用数组的indexOf()方法，判断$route.path是否存在于数组a中，如果不存在则返回true。:在app.vue页面使用MHead组件，利用v-show或v-if来实现显示|隐藏。:将要显示的页面地址存在数组中，判断$route.path不等于数组中元素。在定义路由时配置meta，meta为组件实例身上$route的一个属性。
vue 不同条件展示不同页面_不同测试条件对动力电池过充结果的影响
weixin_39962199的博客
12-14 99
最近特斯拉发生的自燃事故又让人们对电动车动力电池的安全性产生了担忧。电动车一旦发生燃烧进行失效分析寻找起火原因是极为困难的，加之很多企业对起火事故遮遮掩掩、秘而不宣，想了解到事故的起因几乎不太可能。尽管电动车的安全问题涉及到多个方面且动力电池仅是重要零部件之一，确保和提升动力电池单体安全性的相关工作是决不能落下的，因为电池单体的安全性是根本，完全寄希望于系统层次防护是不现实的。过充在所有安全测试中...
Vue中以插件形式封装组件并使用
solitary__的博客
03-22 810
一、常规方法 在Vue项目中，通常使用封装组件的方法是 1.import 导入组件 2.在 components 中注册组件 3.在模板引擎中使用组件 常规方法的弊端 但在实际开发过程中，有一些组件会在多个地方频繁使用，并且组件还有一些自己的方法，如果使用常规方法来使用这些组件，不仅要完成上面三个步骤，还需要在封装好的组件中 $emit 方法，并在使用组件的地方监听，这样使用起来十分复杂，那么有没有一种方法，可以在需要使用组件的地方用一两句简单的代码来完成对组件的使用呢？答案是有的。 二、插件形式 废话不多
我用这9个小技巧封装Vue组件，老大夸我’封得好‘
粉丝们务必加入微信粉丝群
10-27 3827
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub已收录，有一线大厂面试完整考点、资料以及我的系列文章。组件是前端框架的基本构建块。把它们设计得更好会使我们的应用程序更容易改变和理解。在这节课中，分享一下在过去几年中工作中学到的 9 个技巧。
关于vue项目在不同电脑上页面不正常显示问题
yanwu666的博客
03-17 1377
我的电脑缩放比例是150%，而另一台电脑的缩放比例是100%，这就导致了我写的vue项目前端显示方面两台电脑有出入。网上搜索了半天，也没有解决。最终发现对于这样的问题很简单。如果是100%->150%或100%->125% 要相应的缩小。解决方法：更改public/index.html文件。因为我的是150%->100%,所以要放大1.5倍。关于vue项目在不同电脑上页面不正常显示问题。
vue脚手架组件化开发
最新发布
09-13
在Vue.js中，可以使用脚手架来支持组件化开发。脚手架是一个用于快速生成项目结构和代码的工具。引用中提到的vde-cli脚手架就是一个例子。 使用Vue脚手架进行组件化开发的步骤如下： 1. 首先，安装Vue脚手架（vde-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值