Vue学习

Vue学习2019/10/15

（组件注册）
定义组件名的方式有两种：
使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 。

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
全局注册

Vue.component('button-counter', {
	props: ['title'],
	data: function () {
		return {}
	},
	template: '<div><h1>hi...</h1></div>',
	methods:{
		
	}
})

局部注册

var vm = new Vue({
	el : "#app",
	data : {
		
	},
	methods:{
		clicknow : function (e) {
			console.log(e);
		}
	},
	components:{
		test : {
			template:"<h2>h2...</h2>"
		}
	}
});

在页面中就可以使用标签调用test组件。

<div id="app">
	<button-counter></button-counter>
	<test></test>
</div>

（在模块系统中局部注册）
创建一个 components 目录，并将每个组件放置在其各自的文件中。

然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：

 //import组件名称 from组件位置，去引入一个组件

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {      //组件注册
    ComponentA,
    ComponentC
  },
  // ...
}

现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。