Vue2组件化开发

已于 2022-03-13 19:54:45 修改
阅读量960 收藏 1
点赞数 1
文章标签： vue.js javascript 前端
于 2022-03-09 08:06:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47807991/article/details/123367704
版权

Vue2组件化开发

一、组件化开发的基本使用

①组件注册的基本步骤：
  • 创建组件构造器
vue.exetend()
  • 注册组件
Vue.componen()
  • 使用组件
<div id="app">
    <!-- 3.使用组件 -->
    <!-- 组件必须放到vue的实例里才有效 -->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 1.创建组件构造器对象
    const cpnC = Vue.extend({
      template: ` <div>
      <h2>我是一个组件</h2>
      </div>`
    })
    // 2.注册组件
    // 两个参数 一个是注册组件标签名 另一个是组件构造器
    Vue.component('my-cpn',cpnC)

    const app = new Vue({
      el: '#app',
      data: {
        massage:'你好啊'
      }
    })
  </script>
②全局组件和局部组件：

全局组件：意味着可以在多个vue实例下面使用

<!-- 全局组件的使用 -->
  <div id="app">
   <cpn></cpn>
  </div>
  <div id="app2">
    <cpn></cpn>
  </div>
  <script src="../vue.js"></script>
  <script>
    const cpnC = Vue.extend({
      template: ` <div>
      <h2>我是一个组件</h2>
      </div>`
    })
    // 注册全局组件,意味着可以在多个vue实例下面使用
    Vue.component('cpn',cpnC)

    const app = new Vue({
      el: '#app',
    })
    const app2 = new Vue({
      el: '#app2',
    })
  </script>

局部组件： 在一个vue实例里注册的组件是局部组件

 <!-- 全局组件的使用 -->
  <div id="app">
      <!-- 在这里就不能使用<newcpn></newcpn> -->
  </div>
  <div id="app2">
    <newcpn></newcpn>
  </div>
  <script src="../vue.js"></script>
  <script>
    const cpnC = Vue.extend({
      template: ` <div>
      <h2>我是一个组件</h2>
      </div>`
    })
   
    const app = new Vue({
      el: '#app',
    })
    const app2 = new Vue({
      el: '#app2',
      // 在一个vue实例里注册的组件是局部组件
      components: {
        // newcpn 注册组件的标签名
        newcpn: cpnC
      }
    })
  </script>
③*父组件和子组件：
  <div id="app">
  <cpn2></cpn2>
  <!-- 这里不能使用cpn1组件 因为cpn1既没有在全局注册，又没有在vue实例里注册 -->
  </div>
  <script src="../vue.js"></script>
  <script>
    // 1.创建第一个组件(子组件)
    const cpnC1 = Vue.extend({
      template: `
      <div>
        <h2>这是第一个组件</h2>
      </div>
    `
    })

    // 2.创建第二个组件(父组件)
    const cpnC2 = Vue.extend({
      template: `
      <div>
        <h2>这是第二个组件</h2>
        <cpn1></cpn1>
      </div>
    `,
    // 在创建第二个组件时 注册第一个组件并使用
    components: {
      cpn1:cpnC1
    }
    })

    // 所以可以将vue实例当成最顶层的一个组件 root组件
    const app = new Vue({
      el: '#app',
      components: {
        // 在vue实例中注册cpn2组件
        cpn2:cpnC2
      }
    })
  </script>
④注册组件的语法糖：
<div id="app">
   <cpn1></cpn1>
   <cpn2></cpn2>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 全局组件注册的语法糖
    Vue.component('cpn1',{
      template: `
      <div>
      <h2>我是一个全局组件</h2>
      </div>
      `
    })

    // 局部组件的语法糖
    const app = new Vue({
      el: '#app',
      components: {
        'cpn2': {
          template: `
           <div>
          <h2>我是一个局部组件</h2>
          </div>
          `
        }
      }
    })
  </script>
⑤组件模板抽离方法.：

第一种写法 用script标签 注意类型必须是text/x-template

<div id="app">
  <cpn></cpn>
  </div>
  <!-- 第一种写法 用script标签 注意类型必须是text/x-template-->
  <script type="text/x-template" id="cpn">
    <div>
      <h2>一个组件</h2>
    </div>
  </script>

  <script src="../vue.js"></script>
  <script>
    Vue.component('cpn',{
        // 这里直接对应id就行
      template:'#cpn'
    })
    const app = new Vue({
      el: '#app',
    })
  </script>

第二种写法 template标签(推荐) ：

  <div id="app">
  <cpn></cpn>
  </div>
  <!-- 第二种写法  template标签(推荐)-->
  <template id="cpn">
    <div>
      <h2>一个组件</h2>
    </div>
  </template>
  <script src="../vue.js"></script>
  <script>
    Vue.component('cpn',{
      // 这里直接对应id就行
      template:'#cpn'
    })
    const app = new Vue({
      el: '#app',
    })
  </script>

组件是一个单独功能模块的封装
这个模块有属于自己的HTML模板,也应该有属性自己的数据data。

所以组件不可以访问Vue实例里的数据！即使能访问，如果将所有数据都放在vue实例中会显得非常臃肿！

vue组件应该有自己保存数据的地方

⑥*组件的data存放：

组件自己的数据存放在哪里呢?
组件对象也有一个data属性只是这个data属性必须是一一个！函数而且这个函数返回一一个对象,对象内部保存着数据

使用对象保存data可能会出现多个组件共享一个数据，会造成麻烦，而使用函数保存data避免了这个问题

<div id="app">
  <cpn></cpn>
  </div>
  <template id="cpn">
    <div>
      <h2>{{massage}}</h2>
    </div>
  </template>
  <script src="../vue.js"></script>
  <script>
    Vue.component('cpn',{
      template:'#cpn',
      // 组件内部可以有data属性，但是data不能像vue实例一样，data不能是对象
      // data只能写成一个函数
      data(){
        return {
          massage:'一个组件'
        }
      }
    })
    const app = new Vue({
      el: '#app',
    })
  </script>
⑦简单计数器的组件化写法：
<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <!-- 多个组件不共享一个data对象 -->
  </div>
  <template id="cpn">
    <div>
      <h2>当前计数：{{counter}}</h2>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </div>
  </template>
  <script src="../vue.js"></script>
  <script>
    // 1.注册组件
    Vue.component('cpn',{
      template: '#cpn',
      data(){
        return {
          counter:0
        }
      },
      methods: {
        increment() {
          this.counter++
        },
        decrement() {
          this.counter--
        }
      }
    })

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

二、父子组件的通信：

子组件不能直接引用父组件或者Vue实例里的数据，但是,在开发中,往往一些数据确实需要从上层传递到下层:比如在一个页面中,我们从服务器请求到了很多的数据。其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。
这个时候,并不会让子组件再次发送一个网络请求 ,而是直接让大组件(父组件)将数据传递给小组件(子组件)。

父子组件通信方法：
1.通过props向子组件传递数据

2.通过事件向父组件发送信息

在这里插入图片描述

在开发中，Vue实例和子组件间的通信和父子组件间的通信过程是一样的，所以可以将Vue实例看做一个父组件。

①父传子——props：

props的值有两种方式:
1 字符串数组：数组中的字符串就是传递时的名称。
2对象：对象可以设置传递时的类型,也可以设置默认值等。

 <!-- 通过对象传递(主要) -->

<div id="app">
    <!-- 注意这里要用v-bind 不然会将"movies"当做字符串赋值-->
   <cpn :cmovies="movies" :cmassage="massage"></cpn>
  </div>

  <template id="cpn">
    <div>
      <ul>
        <li v-for="item in cmovies">{{item}}</li>
      </ul>
      <h2>{{cmassage}}</h2>
    </div>
  </template>

  <script src="../vue.js"></script>
  <script>
    // 父传子 props
    const cpn = {
      template:'#cpn',
      // props对象写法：
      // 这种写法的好处 1.是可以做到类型限制 2.可以提供一些默认值
      props: {
        cmovies:{
          type: Array,
        // 类型是对象或者数组时，默认值必须是一个函数
          default() {
            return []
          }
        },
        cmassage:{
          type:String,
          // 默认值 在没有传入数据的时候会显示默认值
          default:'你好啊',
          // 是否必传
          required: true
        }
      }
    }
    const app = new Vue({
      el: '#app',
      data: {
        massage:'你好啊',
        movies:['肖生克的救赎','楚门的世界','时空恋旅人']
      },
      components: {
        // 属性的增强写法
        cpn
      }
    })
  </script>

//props对象写法还可以这样写
props: {
        cmovies:Array
      }

 <!-- 通过字符串数组传递 -->
 props: ['cmovies','cmassage']
③子传父——自定义事件：

自定义事件的流程:

  • 在子组件中;通过$emit()来触发事件。
  • 在父组件中,通过v-on来监听子组件事件。
 <div id="app">
      <!-- 父组件监听事件 -->
      <!-- 这里的item-click是自定义事件 没有传参时不会传入事件对象 会把this.$emit('item-click',item)的item传过去 -->
      <cpn @item-click="cpnClick"></cpn>
  </div>
    
  <template id="cpn">
    <div>
      <button v-for="item in categories" @click="btnClick(item)">
        {{item.name}}</button>
    </div>
  </template>

  <script src="../vue.js"></script>
  <script>
    // 子组件
    const cpn = {
      template: '#cpn',
      data() {
        return{
          categories: [
            {id:'AAA',name: 'title1'},
            {id:'BBB',name: 'title2'},
            {id:'CCC',name: 'title3'},
            {id:'DDD',name: 'title4'},
          ]
        }
      },
      methods: {
        btnClick(item){
          // 子组件发射自定义事件
          // (事件名 想要传给父组件的参数 )
          this.$emit('item-click',item)
        }
      }
    
    }
    // 父组件
    const app = new Vue({
      el: '#app',
      data: {
      },
      // 注册子组件
      components: {
        cpn
      },
      methods: {
        cpnClick(item) {
           console.log('cpnClick',item)
        }
      }
        
    })
  </script>
④子传父—计数器案例：

在子组件中实现计数器，并把结果传给父组件

<!-- 父组件 -->
  <div id="app">
   <child-cpn @increment="changeTotal" @decrement="changeTotal">
   </child-cpn>
   <h2>总数是：{{total}}</h2>
  </div>
  
  <template id="child-cpn">
    <div>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </div>
  </template>
  <script src="../vue.js"></script>
  <script>
      
// 父组件
    const app = new Vue({
      el: '#app',
      data: {
        massage:'你好啊',
        total:0
      },
      methods: {
        changeTotal(counter) {
          this.total = counter;
        }
      },
      components: {
        // 注册子组件
        // 在子组件的方法中实现计数器
        'child-cpn': {
          template:'#child-cpn',
          data() {
            return{
              counter:0
            }
          },
          methods: {
            increment() {
              this.counter++;
                // 通过发射事件将counter传到父组件
              this.$emit('increment', this.counter)
            },
            decrement() {
              this.counter--;
              this.$emit('decrement', this.counter)
            }
          }
        }
      }
    })
  </script>
⑤父子组件通信结合双向绑定案例：

要求：①子组件中input里默认数据来源于父组件中的num；

​ ②子组件中input里输入数据时，父组件num也发生改变；

思路：

​ 首先实现①：

​

<div id="app">
    <!-- step1:父组件将num值传到子组件props的number中 -->
    <!-- step2：子组件里，data相当于保存了一份props的数据，当data数据改变时不会影响props，然后input与data双向绑定 -->
    <!-- 总结就是 props给了输入框初始值， 而输入框值和data双向绑定，不干扰props -->
    <!-- 相当于input里的数据和子组件的data双向绑定，而子组件的data来源于父组件 -->
    <cpn :number1="num1"
         :number2="num2"/>
  </div>

  <template id="cpn">
    <div>
      <h2>props:{{number1}}</h2>
      <h2>data: {{dnumber1}}</h2>
      <!-- <input type="text" v-model="number1"> -->
      <!-- 这样写会报错，这里不能这样写 不能直接修改props里的数据，要修改只能用data里的 -->
      <input type="text" v-model="dnumber1">
      <!-- v-model只能绑定自己的data 不能绑定父类 子类-->

      <h2>props:{{number2}}</h2>
      <h2>data: {{dnumber2}}</h2>
      <input type="text" v-model="dnumber2">
    </div>
  </template>

  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        num1: 1,
        num2: 0
      },
      components: {
        cpn: {
          template: '#cpn',
          props: {
            number1: Number,
            number2: Number
          },
          data() {
            return {
              dnumber1:this.number1,
              dnumber2:this.number2
            }
          }
        }
      }
    })
  </script>

在这里插入图片描述

然后实现②：组件中input里输入数据时，父组件num也发生改变；

在这里插入图片描述

 <div id="app">
   
    <!-- step1.子组件先将父组件传过来的props的值复制到data中，然后将data显示到input中 -->
    <!-- step2： 输入框中的数据又会改变子组件的data中的dnumber-->
    <!-- step3:  将事件和dnumber发送给父组件，使父组件中的num随dnumber改变-->
    <!-- 总结就是：props给了 input初始值，input后面输入的值又会改变data 从而通过发射事件改变num-->
    <cpn :number1="num1"
         :number2="num2"
         @num1change="num1change"
         @num2change="num2change"/>
  </div>

  <template id="cpn">
    <div>
      <h2>props:{{number1}}</h2>
      <h2>data: {{dnumber1}}</h2>
      <!-- v-model只能绑定自己的data 不能绑定父类 子类-->
      <!-- 要想绑定父类只能这样写 -->
      <input type="text" :value="dnumber1" @input="num1Input">
        
      <h2>props:{{number2}}</h2>
      <h2>data: {{dnumber2}}</h2>
      <input type="text" :value="dnumber2" @input="num2Input">
    </div>
  </template>

  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        num1: 1,
        num2: 0
      },
      methods: {
        // 默认传过来的value是string类型
        num1change(value) {
          this.num1 = parseInt(value);
        },
        num2change(value) {
          this.num2 = parseInt(value);
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          props: {
            number1: Number,
            number2: Number
          },
          data() {
            return {
              dnumber1:this.number1,
              dnumber2:this.number2
            }
          },
          methods: {
            num1Input(event) {
              this.dnumber1 = event.target.value;
              this.$emit('num1change', this.dnumber1)
            },
            num2Input(event) {
              this.dnumber2 = event.target.value;
              this.$emit('num2change', this.dnumber2)
            }
          }
        }
      }
    })
  </script>

在这里插入图片描述

⑥父访问子—$children：
 <!-- 但是开发过程中一般不用这个方法访问子组件对象 -->
  <div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <button @click="btnClick">按钮</button>
  </div>

  <template id="cpn">
    <div>
      我是子组件
    </div>
  </template>

  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      },
      methods: {
        btnClick() {
          // 这里打印出来是一个对象数组
          console.log(this.$children);
          // 所以可以遍历
          for(let c of this.$children){
            console.log(c.name);
            c.showMessage();
          }
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return{
              name: '我是子组件的name'
            }
          },
          methods: {
            showMessage() {
              console.log('showMessage');
            }
          }
        }
      }
    })
  </script>
⑦07父访问子—$refs：
<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn ref="aaa"></cpn>
    <button @click="btnClick">按钮</button>
  </div>

  <template id="cpn">
    <div>
      我是子组件
    </div>
  </template>

  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      },
      methods: {
        btnClick() {
          // this.$refs默认为一个空对象
          console.log(this.$refs);
          // 但是给子组件加上ref属性之后 就会将属性的名字作为对象名展示
          console.log(this.$refs.aaa);
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return{
              name: '我是子组件的name'
            }
          },
          methods: {
            showMessage() {
              console.log('showMessage');
            }
          }
        }
      }
    })
  </script>
⑧子访问父—parent-root：
 <!-- 但是开发过程中一般不用$parent访问父组件对象 -->
 
  <!-- 最大的组件Vue实例 -->
  <div id="app">
    <cpn></cpn>
  </div>
<!-- 第二个组件 -->
  <template id="cpn">
      <ccpn></ccpn>
  </template>
<!-- 最小的组件 -->
  <template id="ccpn">
    <div>
      <h3>我是子组件</h3>
      <button @click="btnClick">按钮</button>
    </div>
  </template>

  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return{
              name:'我是cpn组件的name'
            }
          },
            components: {
              ccpn: {
                template: '#ccpn',
                methods: {
                  btnClick() {
                  // 1.访问我们的父组件 $parent
                  console.log(this.$parent)
                  console.log(this.$parent.name)

                  // 2.访问根组件：$root
                  console.log(this.$root)
                  // 打印出的是Vue实例
                }
              }  
            }
          }
        }
      }
    })
  </script>

三、组件化高级使用

①slot插槽的基本使用：
 <!-- 
    1.插槽的基本使用 <slot></slot>
    2.插槽的默认值 <slot><button>默认值</button></slot>
    3.如果有多个值同时放入到组件进行替换，一起作为替换元素
   -->
  <div id="app">
    <cpn><button>按钮</button></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>
  <template id="cpn">
    <div>
      <h2>我是一个组件</h2>
      <slot></slot>
      <!-- <slot><button>默认值</button></slot> -->
    </div>
  </template>
  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        
      },
      components: {
        cpn: {
          template:'#cpn'
        }
      }
    })
  </script>
②具名插槽的使用：
 <div id="app">
    <!-- 这里只能替换没有名字的插槽 -->
    <cpn><p>标题</p></cpn>
    <!-- 这样就可以替换有名字的插槽了 -->
    <cpn><span slot="center">替换中间</span></cpn>
  </div>
  <template id="cpn">
    <div>
     <slot name="left"><span>左边的插槽</span></slot>
     <slot name="center"><span>中间的插槽</span></slot>
     <slot name="right"><span>右边的插槽</span></slot>
     <slot></slot>
    </div>
  </template>
  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        
      },
      components: {
        cpn: {
          template:'#cpn'
        }
      }
    })
  </script>
③编译的作用域：

父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。

<div id="app">
    <!-- 这里用的是实例里面的isShow -->
    <cpn v-show="isShow"></cpn>
    <!-- 因为这是写在Vue实例里的，所以模板里面使用变量时都是在实例里面寻找 -->
  </div>

  <template id="cpn">
    <div>
      <h2>我是子组件</h2>
      <!-- 这是在组件的模板里  所以使用的是组件里的isShow -->
      <button v-show="isShow"></button>
    </div>
  </template>

  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow:true
      },
      components: {
        cpn:{
          template: '#cpn',
          data() {
            return{
              isShow: false
            }
          }
        }
      }
    })
  </script>
④作用域插槽的使用：

这样是一个普通的插槽使用：

 <div id="app">
    <cpn></cpn>
  </div>
  <template id="cpn">
    <div>
     <slot>
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
     </slot>
    </div>

  </template>
  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return{
              pLanguages: ['JavaScript', 'Python', 'Swift', 'Go','C++']
            }
          }
        }
      }
    })
  </script>

怎样改变数据的展示形式呢？

<div id="app">

    <!-- 如何使用不同方式展示呢 -->
    <!-- 主要父组件获取到子组件里的pLanguage -->
    <cpn>
      <template v-slot="slot">
        <span v-for="item in slot.data">{{item}} - </span>
      </template>
    </cpn>

    <cpn>
      <template v-slot="slot">
        <span v-for="item in slot.date">{{item}} * </span>
      </template>
    </cpn>

  </div>
  <template id="cpn">
    <div>
      <!-- 这里相当于把PLanguage传给data了 传给data就可以在父组件里使用 -->
     <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
     </slot>
    </div>

  </template>
  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return{
              pLanguages: ['JavaScript', 'Python', 'Swift', 'Go','C++']
            }
          }
        }
      }
    })
  </script>
小何同学－
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue2】组件
weixin_45707229的博客
09-03 948
Vue2中的组件化开发，以及最重要的父子组件间通信，通过props可以实现父传子；通过ref或自定义事件可实现子传父。
Vue2（组件开发）
passerby的博客
08-14 2602
请大家多多指教
vue2的组件
weixin_73577920的博客
01-03 2307
1、组件的作用整个项目都是由组件组成可以让代码复用：相似结构代码可以做成一个组件，直接进行调用就可以使用，提高代码复用性可以让代码具有可维护性（只要改一处，整个引用的部分全部都变）注意点：组件和模块区别模块仅对逻辑进行复用组件针对与结构、逻辑、样式进行复用的UI控件2、组件分类按作用范围分类全局组件：项目中所有地方都可以的组件称为全局组件局部组件(私有组件)：仅有该组件才能使用的组件称为局部组件按照用途来分页面组件自定义组件3、局部组件使用局部组件的具体步骤。
Vue 2 中组件详解
最新发布
2301_77661976的博客
04-30 388
2.emit（事件）∗∗：emit是子组件向父组件传递消息的一种方式。在Vue中，组件是可复用的Vue实例，每个组件都可以拥有自己的模板、脚本和样式。在Vue 2中，我们可以使用Vue.component()方法来创建全局组件，也可以使用Vue实例中的components选项来注册局部组件。2.脚本（Script）：包含组件的JavaScript逻辑，可以包括组件的数据、方法、生命周期钩子等。1.模板（Template）：包含组件的HTML结构，使用Vue的模板语法来定义组件的呈现方式。
Vue 组件化
Ulrica_Amaris的博客
03-30 236
什么是组件化？ 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 但是，我们人有一种天生的能力，就是将问题进行拆解。 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。 组件化也是类似的思想： 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。 但如果，我们讲一个页面拆分成一个个小的功能块 每个功能块完成属于自己这部分独立的功能 那么之后整
Vue2.0开发之——Vue组件-组件属性(34)
我的博客
12-10 2337
为Count组件添加自定义属性为自定义属性添加v-bind自定义属性props是只读的自定义属性default默认值自定义属性type值类型自定义属性required必填值moreprops 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！它的语法格式如下//组件的自定义属性props:['自定义属性A','自定义属性B','其他自定义属性...'],//组件的私有数据data(){return {}}}布局代码。
Vue关于组件化开发知识点详解
10-15
下面将详细讲解Vue组件化的关键知识点： 1. **全局组件注册**：Vue.component()方法用于全局注册组件，注册后的组件可以在任何地方使用。例如，创建一个名为`first-component`的全局组件，包含一个计数器功能： ``...
Vue组件化开发思考
08-28
主要介绍了Vue组件化开发的思考以及相关的原理介绍，如果你对此有兴趣，可以学习参考下。
VUE.JS组件化开发实践
01-27
鉴于目前web前端mvvm框架以及组件化开发方式的流行，决定技术栈采用：vue +vuex+es6+browserify。这里首先简单说下web前端组件化开发方式的历程：最早的组件化结构，代码结构可能如下：将同功能的组件文件放到同一...
Vue基础-综合案例（基于vue2）
a_xia_o的博客
07-27 592
vue-clivue脚手架）是vue官方提供的、快速生成vue工程化项目的工具。特点：①开箱即用②基于webpack③功能丰富且易于扩展④支持创建vue2和vue3的项目在实际开发中，前端开发者可以把自己封装的.vue组件整理、打包、并发布为npm的包，从而供其他人下载和使用。这种可以直接下载并在项目中使用的现成组件，就叫做vue组件库。拦截器会在每次发起ajax请求和得到响应的时候自动被触发。应用场景：①Token身份认证②Loading效果等等。
Vue2：组件及组件通信
孤安先生的博客，作者主站正在重构中，敬请期待！
11-11 1112
组件是可复用的 Vue 实例，封装标签，样式和 JS 代码。 组件化 ：封装的思想，把页面上可重用的部分封装为组件，从而方便项目的 开发和维护。简单理解：一个页面， 可以拆分成一个个组件，一个组件就是一个整体，每个组件可以有自己独立的 结构 样式 和 行为 (html, css和js)
Vue2进阶——路由/组件库
ning_xiao_xuan的博客
04-02 1004
Vue2进阶——路由
VUE2---＞组件化
ClearloveYt的博客
07-28 480
在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios。这种可以直接下载并在项目中使用的现成组件，就叫做。通过 vue-cli 创建的项目在遇到接口跨域问题时，可以通过。element-ui 组件，或是根据需求，只。② vue 项目发现请求的接口不存在，把请求。devServer.proxy 属性的值，跨域资源共享，因此默认情况下，上面的接口。，我们可以只引入需要的组件，以达到。，比如 Button，那么需要在。vue-cli 提供了创建项目的。
vue 组件
weixin_45856470的博客
10-07 315
1. 什么是组件化开发 组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。 2. vue 中的组件化开发 vue 是一个支持组件化开发的前端框架。 vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。 3. vue 组件的三个组成部分 每个 .vue 组件都由 3 部分构成，分别是： template -> 组件的模板结构 script -> 组件的 JavaScript 行为
vue2 动态组件
weixin_55932347的博客
05-01 607
什么是动态组件 动态组件指的是动态切换组件的显示与隐藏。 如何实现动态组件渲染 vue 提供了一个内置的 组件，专门用来实现动态组件的渲染 默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态。 例如： <button @click="coms = 'Left'">渲染 Left组件</button> <button @click="coms = 'Right'">渲染 Right组件</button>
Vue2【尚硅谷--天禹老师】：Vue组件化编程
m0_63077733的博客
03-05 709
Vue2【尚硅谷--天禹老师】：Vue组件化编程
Vue2教程详解五（组件）
一只努力搬砖的打工妹纸
02-21 1751
组件是可复用的Vue实例，因此它们与new Vue接收相同的选项，如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样跟实例特有的选项。 组件是用来实现局部（特定）功能效果的代码(html/css/js)和资源(mp3/mp4/ttf/zip)的集合等 组件的优势：可复用代码，简化项目编码，提高运行效率; 组件的分类：单文件组件（一个文件中只包含有一个组件，大型项目中多用此方法）、非单文件组件（一个文件中包含有n个组件）；局...
vue2 编写自己的组件库，并发布到npm
qq_42859450的博客
06-22 1982
vue2编写自己的组件库，并发布到npm
Vue实现简单——计数器
weixin_62128198的博客
11-16 1390
vue实现计数器
vue的组件化开发过程
03-15
下面是Vue组件化开发的一般过程： 1. 创建组件：首先，你需要创建一个Vue组件。一个Vue组件通常由模板、脚本和样式组成。模板定义了组件的结构和布局，脚本定义了组件的行为和数据，样式定义了组件的外观。 2. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值