码迷,mamicode.com
首页 > 其他好文 > 详细

Vue组价的基本使用

时间:2020-06-01 00:39:06      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:使用   图片   size   实例   相互   类型   方便   分离   src   

组件是可复用的 Vue 实例,我们只需要调用就可以了。

创建组件

方法一:通过extend创建组件(不推荐)

<div id="app">
  <h2>全局组件</h2>
  <my-cpn></my-cpn>
  <h2>局部组件</h2>
  <cpnc></cpnc>
</div>

// 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",
  components:{//局部组件创建
    cpnc:cpnc
  }
})

方法二:template(推荐),这里有三种写法

<div id="app">
  <cpn1></cpn1>
</div>

// 1.注册全局组件语法糖
Vue.component(‘cpn1‘, {
  template:`
    <div>
      <h2>全局组件语法糖</h2>
      <p>全局组件语法糖</p>
    </div>`
})

上面的组件模板都是写在组件里面的,这样写阅读起来不方便,组件模板的分离写法如下:

<!-- 写法一:script标签注意类型是text/x-template -->
<script type="text/x-template" id="cpn1">
  <div>
      <h2>组件模板的分离写法</h2>
      <p>script标签注意类型是text/x-template</p>
    </div>
</script>
<!-- 写法二:template标签 (推荐)--> <template id="cpn2"> <div> <h2>组件模板的分离写法</h2> <p>template标签</p> </div> </template>

JS

const app = new Vue({
  el: "#app",
  components: { //局部组件创建
    cpn1:{
      template:‘#cpn1‘
    },
    cpn2: {
      template: ‘#cpn2‘
    }
  }
})

 

 

组件的动态数据

刚刚创建的组件数据都是静态的,开发中很多数据都是动态数据,我们可以组件中的data解决问题:

<div id="app">
  <cpn1></cpn1>
</div>

const app = new Vue({
  el: "#app",
  components: { //局部组件创建
    cpn1:{
      template:‘<div>{{msg}}</div>‘,
      data(){
        return {
          msg:"组件的数据存放必须要是一个函数"
        }
      }
    }
  }
})

注:组件的data必须是一个函数,而且这个函数返回一个对象保存数据

大家有想过,组件为啥data是一个函数?这里做一个实验,组件cpn1不使用函数,cpn2使用函数:

<div id="app">
  <h2>data不使用函数</h2>
  <cpn1></cpn1>
  <cpn1></cpn1>

  <h2>data使用函数</h2>
  <cpn2></cpn2>
  <cpn2></cpn2>
  <hr>
</div>
<template id="cpn1"> <div> <button @click="count--">-</button> 当前计数:{{count}} <button @click="count++">+</button> </div> </template>
<template id="cpn2"> <div> <button @click="count--">-</button> 当前计数:{{count}} <button @click="count++">+</button> </div> </template>

cpn1返回的公共对象,相当于没有函数的作用域(模拟不使用函数)

const obj = {
  count:0
};
const app = new Vue({
  el: "#app",
  components: { //局部组件创建
    cpn1: {
      template: ‘#cpn1‘,
      data() {
        return obj;//不使用函数
      }
    },
    cpn2: {
      template: ‘#cpn2‘,
      data() {
        return {
          count: 0//使用函数
        }
      }
    }
  }
})

运行结果如下,如果不使用函数它会同加同减,相互作用,这是因为返回的对象地址都是一样的。但使用函数就不会出现这种情况(因为有作用域),它会创建新的地址

技术图片

 

组件是一个封闭的空间,什么意思?即组件的方法不是写着Vue实例里,直接写在组件:

  <div id="app2">
    <mycpn3></mycpn3>
  </div>

  <template id="cpn3">
    <div>
      当前计数:{{count}}
      <button @click="add">+</button>
    </div>
  </template>

JS

   //全局注册组件
    Vue.component(‘mycpn3‘,{
      template:"#cpn3",
      data(){
        return {
          count:0
        }
      },
      methods:{
        add(){
            this.count++;
        }
      }
    });
    //实例Vue
    const app2 = new Vue({
      el:"#app2"
    });

注册组件必须在实例实例Vue前面,不然报错

 

 

Vue组价的基本使用

标签:使用   图片   size   实例   相互   类型   方便   分离   src   

原文地址:https://www.cnblogs.com/bushui/p/12229113.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!