vue组件

最新推荐文章于 2022-08-04 22:15:28 发布
最新推荐文章于 2022-08-04 22:15:28 发布
阅读量78 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yj_5979/article/details/111825156
版权

组件化

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <!-- 组件化：
  如果我们将一个页面中所有的逻辑处理全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及拓展

  我们将一个完整的页面分成很多个组件。每个组件都用于事件页面的一个功能块。而每一个组件又可以进行细分

  Vue组件化思想：
  它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用
  任何的应用都会被抽象成一颗组件树

  组件使用三个步骤：
  创建组件构造器
  注册组件
  使用组件
  -->
  <div id="app">
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    // 1.创建组件的构造器对象
    // 传入template代表我们自定义组件模板，垓模板就是使用到组件的地方要显示的html代码
    const cpnC = Vue.extend({
      template: `
        <div>
          <h2>我是标题</h2>
          <p>我是内容，哈哈哈哈哈</p>
          <p>我是内容，哈哈哈哈哈</p>
        </div>`
    });
    // 2.注册组件
    // 将构造器注册为一个组件，并且给他起一个组件标签名称   （注册组件的标签名，组件构造器）

    // 这里注册的是全局组件
    // Vue.component('my-cpn', cpnC);

    // 组件必须挂载在vue实例下，否则不会生效
    const app = new Vue({
      el: '#app',
      data: {
      },
      components: {
        // 局部组件 这里是因为中间有一个‘-’，所以使用引号将其引起来
        'my-cpn': cpnC
      }
    })
  </script>
</body>

</html>

父组件和子组件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <div id="app">
    <cpn2></cpn2>
    <!-- <cpn1></cpn1> -->
    <cpn3></cpn3>
    <cpn4></cpn4>
    <cpn5></cpn5>
  </div>

  <template id="cpn5">
    <div>
      <h2>我是标题5</h2>
      <p>我是内容，哈哈哈哈哈</p>
      <p>我是内容，哈哈哈哈哈</p>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    // 子组件
    const cpnC1 = Vue.extend({
      template: `
        <div>
          <h2>我是标题1</h2>
          <p>我是内容，哈哈哈哈哈</p>
          <p>我是内容，哈哈哈哈哈</p>
        </div>`
    });

    // 语法糖 全局组件
    Vue.component('cpn3', {
      template: `
        <div>
          <h2>我是标题3</h2>
          <p>我是内容，哈哈哈哈哈</p>
          <p>我是内容，哈哈哈哈哈</p>
        </div>`
    })
    // 将模板提出去
    Vue.component('cpn5', {
      template: '#cpn5'
    })

    // 父组件
    const cpnC2 = Vue.extend({
      template: `
        <div>
          <h2>我是标题2</h2>
          <p>我是内容，哈哈哈哈哈</p>
          <p>我是内容，哈哈哈哈哈</p>
          <cpn1></cpn1>
        </div>`,
      components: {
        cpn1: cpnC1
      }
    });

    // root组件
    const app = new Vue({
      el: '#app',
      data: {
      },
      components: {
        cpn2: cpnC2,
        //要想直接使用cpn1必须再注册
        cpn1: cpnC1,
        cpn4: {
          template: `
            <div>
              <h2>我是标题4</h2>
              <p>我是内容，哈哈哈哈哈</p>
              <p>我是内容，哈哈哈哈哈</p>
            </div>`
        }
      }
    })
  </script>
</body>

</html>

组件通信-父传子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <div id="app">
    <cpn5></cpn5>
    <cpn :cmovies="movies" :cmessage="message"></cpn>
    <cpn :cmovies="movies"></cpn>
    <!-- 当前版本props不支持驼峰命名，需要使用横线  cInfo   c-info -->
    <cpn :c-info="info"></cpn>
  </div>

  <template id="cpn5">
    <div>
      <h2>{{title}}</h2>
      <p>我是内容，哈哈哈哈哈</p>
      <p>我是内容，哈哈哈哈哈</p>
    </div>
  </template>

  <template id="cpn">
    <div>
      <h2>{{cmessage}}</h2>
      <h2>{{cmovies}}</h2>
      <h2>{{cInfo}}</h2>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script>

    // 组件对象里面有一个data属性，只是这个data必须是一个方法，而这个方法返回一个对象，对象内部保存着数据
    // 这样返回一个对象，保证了每次调用组件都是不同的对象，如果data是属性的话，就相当于返回的同一内存地址，是同一对象
    Vue.component('cpn5', {
      template: '#cpn5',
      data() {
        return {
          title: '我是标题5'
        }
      }
    })

    // 通过props向子组件传递数据
    // 通过事件向父组件发送消息
    const cpn = {
      template: '#cpn',
      // 数组写法，引号里的是变量，不是字符串
      // props: ['cmovies','cmessage']
      // 对象写法，可以指定属性值类型
      props: {
        // 支持的类型：String,Number,Boolean,Array,Object,Date,Function,Symbol
        // cmovies: Array,
        // cmessage: String
        // 提供一些默认值
        cmessage: {
          // 设置类型
          type: String,
          // 设置默认值
          default: 'aaaaa',
          // 是否必传属性
          required: false
        },
        cmovies: {
          type: Array,
          // 类型是数组或者是对象时，默认值必须是一个函数
          default() {
            return [];
          }
        },
        cInfo: {
          type: Object,
          default() {
            return {};
          }
        }
      }
    }
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        movies: ['海王', '海贼王', '海尔兄弟'],
        info: {
          name: 'jxd',
          age: 23,
          height: 170
        }
      },
      components: {
        cpn
      }
    })
  </script>
</body>

</html>

组件通信-子传父

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <!-- 父组件模板 -->
  <div id="app">
    <!-- 父组件可以监听子组件发射的事件 如果调用方法不传值，就是默认子组件发射的参数 -->
    <cpn @itemclick="cpnClick"></cpn>
  </div>

  <!-- 子组件模板 -->
  <template id="cpn">
    <div>
      <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script>

    const cpn = {
      template: '#cpn',
      data() {
        return {
          categories: [
            { id: 'aaa', name: '热门推荐' },
            { id: 'bbb', name: '手机数码' },
            { id: 'ccc', name: '家用电器' },
            { id: 'ddd', name: '电脑办公' },
          ]
        }
      },
      methods: {
        btnClick(item) {
          // console.log(item);
          // 向父组件发射一个事件 —— 自定义事件，事件命，参数
          this.$emit('itemclick', item);
        }
      }
    }

    const app = new Vue({
      el: '#app',
      data: {
      },
      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 :number="num" @numchange="numChange" />
  </div>

  <template id="cpn">
    <div>
      <h2>props:{{number}}</h2>
      <h2>data:{{dnumber}}</h2>
      <!-- <input type="text" v-model="dnumber"> -->
      <input type="text" :value="dnumber" @input="numInput">
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        num: 1
      },
      methods: {
        numChange(value) {
          // 字符串转数字
          // this.num = Number(value);
          this.num = parseInt(value);
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          props: {
            number: Number
          },
          data() {
            return {
              dnumber: this.number
            }
          },
          methods: {
            numInput(event) {
              // 将input中的value赋值到dnumber中
              this.dnumber = event.target.value;
              // 为了让父组件可以修改值，发生一个事件
              this.$emit('numchange', this.dnumber);
            }
          },
          // 监听可以监听props，data中的值
          watch:{
            
          }
        }
      }
    })
  </script>
</body>

</html>

组件访问-父访问子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <div id="app">
    <div>
      <cpn></cpn>
      <cpn></cpn>
      <cpn ref="aaa"></cpn>
      <button @click="btnclick()">按钮</button>
    </div>
  </div>

  <template id="cpn">
    <div>
      {{name}}
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
      },
      methods: {
        btnclick() {
          // this.$children 获取子组件对象，是一个数组  用的比较少，因为数组通过下标去取不好
          /* for (let c of this.$children) {
            console.log(c);
            c.showMessage();
            console.log(c.name);
          } */
          // this.$refs 是对象 默认是一个空对象，需要在组件标签上添加 ref属性  如：ref="aaa"
          console.log(this.$refs.aaa.name);
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              name: '我是一个子组件'
            }
          },
          methods: {
            showMessage() {
              console.log('showMessage');
            }
          }
        }
      }
    })
  </script>
</body>

</html>

组件访问-子访问父

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <div id="app">
    <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>{{name}}</h2>
      <button @click="btnclick">按钮</button>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        name: 'jxd'
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              name: '我是子组件'
            }
          },
          methods: {
            btnclick() {
              // 1.访问父组件 $parent
              console.log(this.$parent);
              console.log(this.$parent.name);

              // 2.访问根组件 $root
              console.log(this.$root);
              console.log(this.$root.name);
            }
          }
        }
      }
    })
  </script>
</body>

</html>

组件插槽

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <div id="app">
    <cpn><span>不使用插槽默认值</span></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>


    <!-- 具名插槽 只会替换有名字的 -->
    <cpn1><span slot="center">标题</span></cpn1>
  </div>

  <!-- 组件插槽：
    为了让我们封装的组件更加具有拓展性
    让使用者可以决定组件内部的一些内容到底展示什么
   -->

  <template id="cpn">
    <div>
      <h2>我是组件</h2>
      <p>我是组件，哈哈哈哈</p>
      <!-- 插槽可以传入默认值 如果有指定，就显示指定的 -->
      <slot><button>按钮</button></slot>
    </div>
  </template>

  <!-- 具名插槽 -->
  <template id="cpn1">
    <div>
      <slot name="left"><span>左边</span></slot>
      <slot name="center"><span>中间</span></slot>
      <slot me="right"><span>右边</span></slot>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
      },
      components: {
        cpn: {
          template: '#cpn'
        },
        cpn1: {
          template: '#cpn1'
        }
      }
    })
  </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>
      <h2>我是子组件</h2>
      <p>我是内容，哈哈哈哈</p>
      <button v-show="isShow">按钮</button>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              isShow: false
            }
          }
        }
      }
    })
  </script>
</body>

</html>

作用域插槽

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <div id="app">
    <cpn></cpn>
    <cpn>
      <!-- 目的获取子组件的pLanguages -->
      <!-- vue 2.5.x 一下需要使用templatek获取  :data中的值 -->
      <template slot-scope="slot">
        <!-- <span v-for="item in slot.data">{{item}} - </span> -->
        <span>{{slot.data.join(' - ')}}</span>
      </template>
    </cpn>
  </div>



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

  <template id="cpn">
    <div>
      <!-- 这里的 :data 可以随便取名  如 :abc   使用的时候就是slot.abc  -->
      <slot :data="pLanguages">
        <ul>
          <li v-for="item in pLanguages">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go']
            }
          }
        }
      }
    })
  </script>
</body>

</html>
yj_5979
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue组件传参
m0_67316947的博客
07-27 5123
vue组件之间可以进行参数传递，组件传参可分为父向子传参、子向父传参、兄弟之间传参
Vue组件
溪斜山遮的博客
01-25 1万+
Vue组件（一）      Vue组件介绍      Vue组件使用步骤      Vue组件的使用      组件中data 和 el 选项      使用 <script> 或 <template> 标签 V组件 组件系统是Vue
vue组件传值的13种方式
热门推荐
dan_seek的博客
10-19 5万+
vue组件传值 不写这篇文章，我自己都不知道我知道的vue组件传值的方式竟然有13种之多，其实静下来想想，常用的也有五六种。 1、父组件传给子组件 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型 如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}}, 需要注意的是这种传值是...
vue组件封装
m0_64707449的博客
04-05 1万+
1. 全局注册---在main.js中 1.1 首先创建一个xxx.vue文件 1.2 在main.js中引入 语法如下：import '组件对象'from 'xxx.vue文件路径' 1.3 组件注册 语法如下： Vue.component("组件名","组件对象")； 1.4 把组件名在需要设置的某xxx.vue文件中当标签使用 2. 局部注册---在所需设置的某xxx.vue文件中 2.1 首先创建一个xxx.vue文件 2.2在所需设置的某xxx.vue文件中引入 语法如下：.
Vue组件封装
Jueyue15的博客
10-06 3515
组件是什么？ 组件是Vue中的一个重要概念，是一个可以重复使用的Vue是可以复用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。组件是可复用的Vue实例， 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。组件就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，当我们需要什么样的功能，就可以去调用对应的组件。 Vue组件封装过程 ● 首先，使用Vue.extend()创建一个组件 ●
vue组件缓存
csdssdn的博客
06-28 5792
先来看看官网对keep-alive的一些功能说明：组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。就可以使用到keep-alive，它可以用来进行动态组件的缓存组件复用，提高性能 缓存不太使用的组件，而不是直接销毁 在实际项目开发的时候，我们可能需要具体的某个项目可以进行缓存，那么如何通过keep-alive来实现呢？include: [String,RegExp,Array] 只有匹配到的组件才能进行缓存 exclude：[String,RegExp,Array] 匹
vue 组件分类
前端开发者
01-20 7240
vue 组件分类 一. 简介 之所以写这篇文章，是因为前段时间作为面试官，陆陆续续面试了几十个人，其中一个问题就是 "vue 的组件分类都有哪些？" ，令人惊讶的是大多数人都只回答了全局组件和局部组件，难道vue的组件就只是这两种吗？其实谈分类，是一定要谈分类标准的，没有分类标准的分类都是耍流氓。以下是个人总结，不喜勿喷。 本文 github 源码地址 二.分类 1.按组件注册方式分类：可以分为全...
html中使用vue组件
guoyp2126的博客
08-04 2万+
VUE有两种使用方式，一种实在html中直接使用vue做开发，一种是企业级的单页面应用。原认为前一种方式主要作用是为了降低VUE的学习门槛——通过在大家熟悉的HTML环境中使用vue，大家很容易去了解和熟悉VUE。现在看来在html使用vue组件还有两大作用，一个是封装比较复杂的组件，在其他应用中使用，另一个作用是调试样式.........
vue 组件继承
jianjian_19的博客
04-12 3742
1.创建一个公共组件，比如如下 father.vue <template> <div> 父类：{{this.a}} <span>{{title}}</span> </div> </template> <script> export default { data() { return { a: 6, title: '我是爸爸' } }, cre
vue组件如何被其他项目引用
01-19
自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点： 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包，尤其...
详解vue 组件
10-15
在这个详解中，我们将深入探讨Vue组件，这是Vue应用开发中的基石。 首先，Vue的两大核心特性是： 1. **数据驱动** - Vue采用响应式系统，使得数据的变化能够自动反映到视图上。当你更改Vue实例的数据时，与其相关...
VUE组件入门
04-10
VUE组件入门，很基础的ppt，入门的同学可以看下哦！！
vue 组件简介
10-15
主要介绍了vue组件的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
正弦波信号发生器设计教程.docx
06-22
正弦波信号发生器设计 本教程详细介绍了如何设计和实现一个正弦波信号发生器，涵盖了硬件实现和软件实现两种方法。通过硬件方法，我们使用函数发生器和示波器生成和观察正弦波信号；通过软件方法，我们使用Python和MATLAB生成和绘制正弦波信号。此外，教程还提供了一些扩展功能，以提高信号发生器的实用性和灵活性。无论您是电子工程师还是编程爱好者，都能从本教程中获得实用的技能和知识。
芯晞微 CSM2042 40V，低辍学，250 mA线性调节器 深圳市可芯电子有限公司.pdf
06-22
芯晞微 CSM2042 40V，低辍学，250 mA线性调节器 深圳市可芯电子有限公司.pdf
gaodetianqi.txt
06-22
gaodetianqi.txt
编程项目实战：基于JAVA的文件压缩与解压缩实践(源代码+论文)
最新发布
06-22
文件的压缩与解压缩，要能方便地进行，要完成的功能包括压缩功能，解压缩功能，选择文件路径，选择操作方案，选择新文件保存路径。此程序还要在压缩成功后显示被压缩文件的大小，并对非法操作给出提示。 用户可以选择文件进行压缩或解压缩操作，并选择生成保存路径，默认的保存路径为原文件目录，压缩的生成文件以原文件加.gzip后缀命名，在解压缩操作中，若输入文件不是gzip格式的压缩文件，则提示gzip文件格式不对。 程序的基本设计原则有：方便性原则、功能实用性原则和开放性原则等。程序设计时采用较好的压缩技术，能保证文件压缩的压缩比和可恢复性，确保程序有较长的生命周期。 本程序的总体目标是实现文件压缩与解压缩的便捷操作，因此需要有便捷的操作界面。 2.2使用的算法理论 2.2.1LZ77算法简介 这一算法是由Jacob Ziv和Abraham Lempel于 1977 年提出，所以命名为LZ77。这种算法模型也被称为“滑动字典”模型或“滑动窗口”模型。 压缩的模型如图1： 　　　 图1 压缩中的LZ77算法模型图 在最远匹配位置和当前处理位置之间是可以用来查找匹配的“字典”区域，随着压缩的进行，“
vue实例是不是vue组件
07-30
Vue实例和Vue组件是两个不同的概念。 Vue实例是Vue框架的核心概念，它是通过Vue构造函数创建的对象。Vue实例是Vue应用的根实例，它包含了Vue的各种选项和方法，可以用来定义数据、方法、计算属性、监听属性等。通过...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值