Vue组件精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/fcroomhq1/article/details/104985514

Vue手记 - 组件

文章目录

Vue手记 - *组件*
1、组件定义数据结构
2、组件实现
3、组件命名规则与html节点名关系的实验

1、组件定义数据结构

{
	name:'组件名',
	props: ['data'],//自定义 attribut，用来传递数据
	data:function(){
	// 注意这里的data，
	// 和Vue实例化时的data类型不一样
	// 这里是个function，全写是data:function(){}，简写是 data(){}
		return {};
	},
	methods:{
	}
}

2、组件实现

以下内容是用 vue-cli 创建的项目，在 npm run build 后的结果。

2.1、JS文件中定义并注册组件

在js文件中实现，不用进行 import，不能实现 style 定义 ,只能实现 line style
注册后为 全局组件

Vue.component('VueComInJs', {
  template: '<Button> Button  with js component . </Button>'
});

<!-- 在vue文件中调用 -->
<VueComInJs></VueComInJs>
<vue-com-in-js></vue-com-in-js>

显示结果如下

2.2、实例化Vue、组件内部的components对象内实现并注册组件

不用进行 import ，只能实现内联样式
注册后为 局部组件

2.1.1、Vue实例化时实现

// Vue实例化时实现，格式如下：

var v = new Vue({
		  el: '#app',
			components: {
		    // 此处实现组件数据结构
		  }
		})

<html>
<head></head>
<body>
	<div id="app">
		<com-in-vue :nodename="'myButtonInApp-upper'"></com-in-vue>
	</div>
	<script>
		// Vue实例化时实现组件
		var v = new Vue({
		  el: '#app',
		  data: {
		  },
			components: {
		    "com-in-vue": {
		      template: '<Button>Component in Vue.</Button>'
		    }
		  }
		})
	</script>
</body>
</html>

收上html输出结果

2.1.2、组件内部实现

注册后为 局部组件

// 组件内部实现 myButton，在 parentcom 组件内有效
export default {
  name: "parentcom",
  data() {
    return {};
  },
  props: ["data"],
  components: {
    myButtonInApp: {
      name: "my-button-in-app",
      data() {
        return { count: 0 };
      },
      template: '<button v-on:click="count++">{{count}}</button>'
    }
  }
};

<!-- 使用 -->
<myButtonInApp></myButtonInApp>
<my-button-in-app></my-button-in-app>

每单击一次按钮，单击次数加1的显示效果

结果： 按钮每单击一次，自身数字加1。

2.3、单文件组件

定义在一个 vue 文件里，使用时通过 import 导入

<template>
<!-- 这里实现具体的页面元素节点 -->
</template>

<script>
// 组件数据结构定义，实现组件功能
export default{

}
</script>

<style>
/* 实现样式定义 */
</style>

定义

<template>
  <ul class="mul">
    <li class="mli" v-for="(n,i) in myarray" :key="i">
      <span>{{ n }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: "myul",
  data() {
    return { myarray: [1, 2, 3, 4, 5] };
  }
};
</script>

<style>
.mul {
  width: 200px;
}
.mli {
  padding: 5px;
  background-color: rgb(204, 204, 204);
  list-style-type: circle;
}
.mli:nth-child(odd) {
  background-color: rgb(161, 160, 160);
}
</style>

引入（注册）方法

全局注册

import MyUl from './components/MyUl.vue'
Vue.component('MyUlWithMainImport-Global', MyUl);

<!-- Html节点 -->
<MyUlWithMainImport-Global></MyUlWithMainImport-Global>

局部注册

在components对象内部实现注册

components: {
    "my-ul": () => import("./components/MyUl")
  }

<!-- Html节点 -->
<my-ul></my-ul>

显示结果

3、组件命名规则与html节点名关系的实验

直接在 www.runoob.com 在线运行功能上面测试，为了区分加入了 nodename 属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 组件</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<<myButtonInApp :nodename="'myButtonInApp-upper'"></myButtonInApp>
	<my-button-in-app :nodename="'my-button-in-app'"></my-button-in-app>
	<mybuttoninapp :nodename="'mybuttoninapp-lower'"></mybuttoninapp>
</div>

<script>
new Vue({
  el: '#app',
  data: {
  },
	components: {
    myButtonInApp: {
      name: "my-button-in-app",
      data() {
        return { count: 0 };
      },
      props:['nodename'],
      template: '<Button>Button on Vue, node is {{nodename}} .</Button>'
    }
  }
})
</script>
</body>
</html>

1. 将 name 为 my-button-in-app 的组件注册为名称为 myButtonInApp 的对象；
2. 分别使用 myButtonInApp、my-button-in-app、my_button_in_app 三个节点调用。

运行结果
1的运行结果，只能看到 my-button-in-app 的按钮
只有 my-button-in-app *节点正常显示 *

查看 console 输出

从显示结果和 console 输出可以发现，Vue会将节点名转成小写去查找组件的注册名。

这和 vue-cli 创建的项目在 npm run butild 后的结果是不同的。

结论：
通过vue-cli 创建在 npm run build 后，只要节点名是驼峰式就可以找到；
在线环境中只识别注册的组件名，这是原始的vue.js规则。