Vue的核心:组件的创建及使用
2018/9/21 10:47:02

今天我们来学习一个比较重要的知识点,也就是vue的组件,我们都知道做网页的时候我们都是把头部header.html和底部footer.html复杂一点的网站我们会把导航单独用nav.html去调用,在不同的页面中去引用这些文件,这些文件我们也可以理解为组件,vue的组件也是这样,在需要使用组件的时候去调用,使用组件我们可以减少很多重复性开发


组建的创建方式有很多种,可以用构造器extend来创建,也可以用<template id="xxx"></template>来创建

还可以写在<script type="text/x-template" id="xxx"></script>里面,写在script里面不会被浏览器解析

使用extend构造器创建组件
var headerVue = Vue.extend({ template: '<div>定义的全局组件</div>' }); // 全局组件的注册 Vue.component('header-vue', headerVue); var vm = new Vue({ el: '#app', data: { }, methods: { } });


然后使用组件

<div id="app">    <header-vue></header-vue> </div>


这样写非常麻烦,vue还提供了一种简单的方法,就是用component里面直接用template写组件的模板

 //定义全局组件  Vue.component('header-vue',{    template:'<div>定义的全局组件</div>'  })  var vm = new Vue({    el: '#app',    data: {    },  });


然后使用组件

<div id="app">    <header-vue></header-vue> </div>


如果需要局部注册就在当前的组件实例中使用components注册,注册后只能在当前实例中使用

var vm = new Vue({ el: '#app', data: { }, components: { 'header-vue': { template: '<div>局部注册的组件</div>' }, } });


然后使用组件,注意:只能在当前实例中使用这个标签就可以,例如是在app组件中注册的就只能在app组件中使用

<div id="app">    <header-vue></header-vue> </div>


我们还可以定义一个变量来接收模板,然后注册的时候我们就用这个变量,总共三步


1.先用template创建模板

<template id="header"> <!-- 注意这里一定要有根容器的div,并且只能有一个 -->    <div>     <div>定义的组件</div> </div> </template>


2.然后把这个id为header的模板赋给这个变量

3.最后注册的时候我们用的模板就是这个变量

 var headerVue = {    template:"#header"  }  var vm = new Vue({    el: '#app',    data: {    },    components: { //3.最后注册的时候我们用的模板就是这个变量      "header-vue":headerVue      // headerVue:headerVue  //这种驼峰命名写法也可以,和上面的区别是不要加冒号    }  });


下面我们来讲一下在vue-cli脚手架中创建组件及使用组件的方法

NO.1 全局组件的使用方法
//在main.js 引入并注册全局组件 import Header from "./components/Header" Vue.component("header-vue",Header);

之后就可以在任意的组件中使用

<template> <div> <header-vue></header-vue> </div> </template>


NO.2 局部组件的使用方法
//局部组件的使用  引用需要的组件 import Header from "./components/Header" export default{ data(){ return { } }, methods:{ }, components:{ //注册局部组件 "header-vue":Header } }
<!-- 请注意这样只能在当前的组件中使用header-vue标签来使用组件 --> <template> <div> <header-vue></header-vue> </div> </template>

猜你喜欢

发表评论

标签云
返回顶部图片