共计 1528 个字符,预计需要花费 4 分钟才能阅读完成。
一、步骤一:组件的构建(组件的命名用驼峰命名法,或者短横线分隔命名)
办法一:extend 构建
应用 Vue 结构器,创立一个“子类”,参数是一个蕴含组件选项的对象,其中,data 选项中必须是函数
var author = Vue.extend({
template: "<p><a :href='url'>{{author}}</a></p>",
data : function() {
return {
author : 'vamous',
办法二:template 标签构建法
template 标签构建,需在标签上加 id 属性用以前期注册
<template id=”myCom”>
<div> 这是 template 标签构建的组件 </div>
</template>
办法三:template 标签构建法 (能够把组件作为独自的一个 *.vue 文件寄存,用时用 import 引入)
<template>
<div> 这是 template 标签构建的组件 </div>
</template>
<script>
import bus from '../common/bus';
export default {data() {
return {
collapse: false,
fullscreen: false,
name: 'linxin',
message: 2
}
},
computed:{username(){let username = localStorage.getItem('ms_username');
return username ? username : this.name;
}
},
methods:{
// 用户名下拉菜单抉择事件
handleCommand(command) {if(command == 'loginout'){www.pizei.comlocalStorage.removeItem('ms_username')
this.$router.push('/login');
</script>
二、步骤二:组件的注册
(1) 全局注册
一次注册,可在多个 vue 实例中应用,需调用 Vue.component() 办法,这个办法需传 2 个参数,第一个参数为组件名称,第二个参数为组件结构时定义的变量。
咱们先用全局注册注册下面例子中创立的 myCom 组件
Vue.component(‘my-com’,myCom)
还有一种不需构建间接注册的写法——注册语法糖
Vue.component(‘my-com’,{
'template':'<div> 这是我的组件 </div>'
})
‘my-com’ 为给组件自定义的名字,在应用时会用到,前面 myCom 对应的就是下面构建的组件变量。
留神命名标准,个别组件名字以短横线分隔或一个小写单词。例:footer-nav,footernav
如果是用 template 及 script 标签构建的组件,第二个参数就改为它们标签上的 id 值
Vue.component(‘my-com’,{
template: '#myCom'
})
(2) 部分注册
只能在注册该组件的实例中应用
var app = new Vue({
el: '#app',
components: {'my-com': myCom}
})
注册语法糖
var app = new Vue({
el: '#app',
components: {
'my-com': {template: '<div> 这是我的组件 </div>'}
}
})
template 及 script 构建的游戏组件
var app = new Vue({
el: '#app',
components: {
'my-com': {template: '#myCom'}
}
})
三、步骤三:组件的应用
咱们只需在须要调用组件的中央写上组件名字的标签即可
<div>
/* 调用组件 */
<my-com></my-com>
</div>