vue组件的创建

最新推荐文章于 2022-10-15 14:19:09 发布

DJCai7

最新推荐文章于 2022-10-15 14:19:09 发布

阅读量250

点赞数

vue组件的创建

核心目标

为了可重用性高，减少重复性开发，我们可以按照template、style、script的拆分方式，放置到对应的.vue文件中。

组件概括

vue组件可以理解为预先定义好的ViewModel类。一个组件可以预定义很多选项，最核心的有：

模板template：模板反映了数据和最终展现给用户的DOM之间的映射关系，
初始数据data：一个组件的初始数据状态，对于可重复的组件来说，通常是私有的状态。
接收的外部的参数（props）：组件之间通过参数来进行数据的传递和共享，参数默认是单项绑定，但也可以显示声明为双向绑定。
方法（methods）：对数据的改动操作一般都在组件内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
生命周期函数（钩子函数）：一个组件会触发多个生命周期函数，在这些钩子函数中可以封装一些自定义逻辑。可以理解为controller的逻辑被分散到了这些钩子函数中。

注册组件

注册组件就是利用Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。

（组件名不要带有大写字母，多个单词使用中划线my-dom）

全局组件
（直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。）
（一般写插件的时候全局组件使用多一些）


//第一种 定义与注册分开
   // 1. 使用vue.extend定义：
    const mycomponent = Vue.extend({
        template:`<div>组件</div>`
    })
    // 2. 注册:
    Vue.component("mycomponent",mycomponent);

//第二种方式 定义与注册合并
Vue.component('mycomponent',{      //自定义组件名mycomponent
    template: `<div>这是一个自定义组件</div>`,
    data () {
      return {
        message: 'hello world'
      }
    }
  })

局部注册组件
使用三部曲1.创建这个组件；2.注册这个组件；3.使用这个组件；

<div id="app">
    <mycomponent></mycomponent>   //3.组件的使用
    <my-component></my-component>    //3.组件的使用
</div>
<script>
  //1.创建这个组件
  const  mycomponent={
      template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用{{aa}}</div>`,
      data(){
        return {'aa':'hello'}
      }
   }；

  const  app = new Vue({
    el: '#app',
    data: {
    },
    components: {
      mycomponent,//2.注册这个组件
      }
    }
  })
</script>

模板的要求：组件的模板只能有一个根元素。

// 第一种方式
template: `<div>
                元素1.....
                元素2.....
                元素3.....
           </div>`,

//第二种方式，模板内容用template包裹
<html>
/*template与<div id="app">同级*/
<template id="loginTpl">   
    <!-- 需要有个根标签 -->
      <div>
          <input type="text" placeholder="用户名"><br>
          <input type="password" placeholder="密码">
      </div>
</template>
</html>
实例中
    template: `#loginTpl`,

//第三种，模板内容用script包裹
<script type="text/html" id="loginTpl">   
    <!-- 需要有个根标签 -->
      <div>
          <input type="text" placeholder="用户名"><br>
          <input type="password" placeholder="密码">
      </div>
</script>
实例中
    template: `#loginTpl`,

组件中的data必须是函数。

若用字面量定义data,复用组件时每个实例将共用同一个data,组件间的data就会相互影响,而使用一个函数,并返回一个新对象,这样每个实例就可以维护属于自己的data,而不会相互影响

data:function(){
            return {'aaa':'bbb'}//template中可以使用aaa
        },
//或
data(){
            return {'aaa':'bbb'}//template中可以使用aaa
        },

组件的属性props。
Vue组件通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据。

<div id="app1">
    //动态操作属性：name是变量（读取实例中data的值）
    <hello :n="name"></hello>
</div>
<div id="app2">
    // 静态的属性：name是常量（就是name）
    <hello n="name"></hello>
</div>
<script>
    Vue.component('hello',{
        props:['n'],//通过父组件传过来的数据 name变量
        data(){
            return {'aaa':'bbb'}
        },
        template:'<p>{{aaa}} {{n}}</p>'
    })
    var app1=new Vue({
        el:'#app1',
        data:{
            name:'haha'
        }
    })
    var app2=new Vue({
        el:'#app2',
        data:{
            name:'haha'
        }
    })
</script>

DJCai7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件的创建

vue组件的创建核心目标为了可重用性高，减少重复性开发，我们可以按照template、style、script的拆分方式，放置到对应的.vue文件中。组件概括vue组件可以理解为预先定义好的ViewModel类。一个组件可以预定义很多选项，最核心的有：模板template：模板反映了数据和最终展现给用户的DOM之间的映射关系，初始数据data：一个组件的初始数据状态，对于可...
复制链接

扫一扫