版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Fanbin168/article/details/85775179
全局组件的第一种定义方式
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<!--注意：如果组件的名称采用的是驼峰命名方式，则需要用-隔开-->
<!--例如：下面定义的名称为myCom1的组件，就需要<my-Com1></my-Com1>这样来使用-->
<my-com1></my-com1>
<mycom2></mycom2>
<mycom3></mycom3>
</div>
<script>
//定义全局Vue组件
//Vue.extend 返回的是一个“扩展实例构造器”,即：组件的模板对象
/*Vue.component 是用来全局注册组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件
可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用类似于 new myVue 这样的构造函数来生成组件实例，
并挂载到自定义元素上，当然实际情况要比这复杂得多，还需要处理 props 数据传递、slot 内容分发、自定义事件、组件生命周期……事宜*/
var com1 = Vue.extend({
template: "<h3>我是组件</h3>" //通过template属性，指定了组件要展示的HTML结构
})
Vue.component("myCom1", com1); //myCom1是我定义的组件名字，com1是组件的内容 （驼峰命名）
Vue.component("mycom2", com1); //mycom2是我定义的组件名字，com1是组件的内容（非驼峰命名）
//简写
Vue.component("mycom3", Vue.extend({
template: "<h1>大大的组件</h1>"
}))
//简写2 ：相对上面的简写，这里更是简单了，直接省略Vue.extend()
//这种写法虽然简单点，但是它有他的问题， 就是这个组件只能有且只有一个根元素
Vue.component("mycom4", {
//template: "<h3>大大的组件</h3><span>哈哈</span>" 错误的写法；需要用在外面用一个div将h3和span两个元素包裹起来，形成一个唯一的根元素
template: "<div><h3>大大的组件</h3><span>哈哈</span></div>"
});
var vm = new Vue({ el: "#app" })
</script>
</body>
</html>
全局组件定义的第二种方式：推荐
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<mycom></mycom> <!--组件的使用方式-->
</div>
<template id="temp"><!--组件模板-->
<div>
<h3>这是通过template元素，在外部定义的组件结构，这个方式有代码的智能提示和高亮</h3>
<span>好用，不错</span>
</div>
</template>
<script>
//定义全局Vue组件 组件名叫mycom，组件的内容是#temp所指向的模板内容
Vue.component("mycom", {
template: "#temp"
});
var vm = new Vue({ el: "#app" })
</script>
</body>
</html>私有组件的定义方式
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<mycom></mycom> <!--组件的使用方式-->
<login></login>
</div>
<template id="temp">
<!--组件模板-->
<div>
<h3>这是通过template元素，在外部定义的组件结构，这个方式有代码的智能提示和高亮</h3>
<span>好用，不错</span>
</div>
</template>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {},
components: { //components中是定义私有组件的
//定义个名字为mycom的私有组件
"mycom": {
template: "#temp"
},
//定义个名字为login的私有组件
"login": {
template: "<h1>这里是登陆窗口</h1>"
}
}
})
</script>
</body>
</html>
组件中data的使用
在Vue中，除了vue实例有data外，组件是可以有自己的data和methods
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<mycom1></mycom1> <!--组件的使用方式-->
</div>
<template id="temp">
<!--组件模板-->
<div>
<h3>{{msg}}</h3> <!--这个msg是组件中的data-->
<span>{{name}}</span>
</div>
</template>
<script>
//1>组件可以有自己的data数据
//2>组件中的data与vue实例中的data有点不一样，vue实例中的data可以是一个对象，但是组件中的data只能是一个函数，并且函数必须返回一个对象
Vue.component("mycom1", {
template: "#temp",
data: function () { //组件中的data与vue实例中的data有点不一样，他只能是一个函数，并且函数必须返回一个对象(将需要的数据放在对象中返回)
return {
name:'张学友',
msg: "我是data中的数据"
};
}
})
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
</script>
</body>
</html>组件中的data和methods
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<mycom1></mycom1> <!--组件的使用方式-->
<hr />
<mycom1></mycom1> <!--组件的使用方式-->
</div>
<!--组件模板-->
<template id="temp">
<div>
<input type="button" value="+1" v-on:click="increment" /> <!--increment是组件中的方法-->
<input type="text" v-model="count" /><!--count是组件中的count-->
<h3>{{count}}</h3><!--count是组件中的count-->
</div>
</template>
<script>
//1>组件可以有自己的data数据 和 methods 方法
//2>组件中的data与vue实例中的data有点不一样，vue实例中的data可以是一个对象，但是组件中的data只能是一个函数，并且函数必须返回一个对象
Vue.component("mycom1", {
template: "#temp",
data: function () { //组件中的data与vue实例中的data有点不一样，他只能是一个函数，并且函数必须返回一个对象(将需要的数据放在对象中返回)
return {
count:0
}
},
methods: {
increment: function () {
this.count += 1;
}
}
})
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
</script>
</body>
</html>
使用component占位符实现组件的切换
一般情况下，在同一个页面，我们要实现不同的功能（比如登录，注册）可以采用切换登录，注册的模块来实现不同的显示
这样就不用登录搞一个页面，注册也搞一个页面了。我们根据不同的需求来确定这个页面应该显示什么内容，比如下面的：
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<a href="" v-on:click.prevent="comName='login'">登陆</a>
<a href="" v-on:click.prevent="comName='register'">注册</a>
<!-- Vue提供了component来展示对应名称的组件-->
<!-- component 是一个占位符，v-bind:is属性可以用来指定要展示的组件名称-->
<!-- 例如v-bind:is="comName" 就表示这里要展示comName变量的值这个组件 ，例如：comName的值为login 那么这里就展示login这个组件-->
<component v-bind:is="comName"></component>
</div>
<!--组件模板-->
<template id="login">
<div>
<h3>登陆模块</h3>
</div>
</template>
<template id="register">
<div>
<h3>注册模块</h3>
</div>
</template>
<script>
Vue.component("login", { //定义一个登陆组件
template: "#login",
})
Vue.component("register", { //定义一个注册组件
template: "#register",
})
var vm = new Vue({
el: "#app",
data: {
comName: 'login'//默认展示登陆模块
}
})
</script>
</body>
</html>
