Vue学习游戏组件开发

Posted 2021-09-12 diuxie

一、步骤一：组件的构建（组件的命名用驼峰命名法，或者短横线分隔命名）

 方法一：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>