组件是 Vue 强大的功能之一，Vue组件具有封装可复用的特点，能够让你在复杂的应用中拆分成独立模块使用。注意，所有的 Vue 组件同时也都是 Vue 的实例，可接受相同的选项对象。
我们可以通过全局注册和局部注册的方式来注册一个 Vue 组件，两种方式的区别在于，全局注册的组件能够在任何地方使用，其实就是所有的 Vue 实例化的时候都会去渲染这个全局组件；而局部组件只是注册在某一个 Vue 实例化对象上，只能在这个 Vue 实例化的时候会渲染，其他地方使用会被当成普通的Html标签渲染。
1.全局注册
<div id="demo" >
<!-- Vue组件 -->
<my-component></my-component>
</div>
<script src="./vue.js"></script>
<script>
Vue.component("my-component", {
template: "<div>我是一个组件示</div>"
})
var demo = new Vue({
el: "#demo"
})
</script>
2.局部注册
<div id="demo" >
<my-component></my-component>
</div>
<script src="./vue.js"></script>
<script>
var demo = new Vue({
el: "#demo",
components: {
"my-component": {
template: "<div>我是一个组件</div>"
}
}
})
</script>
3.父组件给子组件传递数据 (用props)
<div id="demo">
<my-component msg="我是父组件传递的数据"></my-component>
</div>
<script src="./vue.js"></script>
<script>
Vue.component("my-component", {
props: ["msg"],
template: "<div>{{msg}}</div>",
});
var demo = new Vue({
el: "#demo"
})
</script>
4.父组件动态给子组件传递数据 (用v-bind)
<div id="demo">
<input type="text" v-model="width" />
<width-component :width="width"></width-component>
</div>
<script src="./vue.js"></script>
<script>
Vue.component("width-component", {
props: ["width"],
template: '<div :style = "style"></div>',
computed: {
style: function() {
return {
width: this.width + "px",
background: "red",
height: "60px"
};
}
}
});
var demo = new Vue({
el: "#demo",
data: {
width: 0
}
});
</script>
5.子组件给父组件动态传递数据 (用$emit)
<div id="demo">
您现在的银行卡余额是{{ total }}
<son-component @change="handleTotal"></son-component>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
total: 2000
},
components: {
"son-component": {
template:
'<div>\
<button @click="handleincrease">+1000</button>\
<button @click="handlereduce">-1000</button>\
</div>',
data: function() {
return {
count: 2000
};
},
methods: {
handleincrease: function() {
this.count = this.count + 1000;
this.$emit("change", this.count);
},
handlereduce: function() {
this.count = this.count - 1000;
this.$emit("change", this.count);
}
}
}
},
methods: {
handleTotal: function(value) {
this.total = value;
}
}
});
</script>
6.非父子组件之间传递数据
<div id="demo">
<a-component></a-component>
<br />
<b-component></b-component>
</div>
<script src="./vue.js"></script>
<script>
Vue.component("a-component", {
template: '<div><button @click="handle">点击我向b组件传递数据</button></div>',
data: function() {
return {
aaa: "我是来自a组件中的数据"
};
},
methods: {
handle: function() {
this.$root.bus.$emit("a", this.aaa);
}
}
});
Vue.component("b-component", {
template: "<div></div>",
created: function() {
this.$root.bus.$on("a", function(value) {
alert(value);
});
}
});
var demo= new Vue({
el: "#demo",
data: {
bus: new Vue()
}
});
</script>
