阅读 96

vue学习笔记-vue组件conponent的全局组件和局部组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue组件conponent的全局组件和局部组件</title>
	</head>
	<body>
		<div id="app"></div>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			以下是全局组件的写法,就是对vue使用内部方法components,方法参数提供一个对象
				Vue.component(
					{
						'ui-button', {
							template: '<button>我是按钮组件</button>'
						}
					}
				)
				var vm = new Vue(
					{
						el:'#app',
						data: {
							
						}
					}
				)
			
			以下是局部组件的写法,就是对vue的实例化对象vm里新建一个属性components
				var uiButton = {
					template: '<button>我是按钮组件</button>'
				}
			
				var vm = new Vue(
					{
						el:'#app',
						data: {
							
						},
						components:{
							'ui-button': uiButton
						}
					}
				)
		</script>
	</body>
</html> 复制代码