vue-组件
Posted https://blog.zlevai.com
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-组件相关的知识，希望对你有一定的参考价值。
组件？
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 html 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
1.全局组件
//全局组件必须在Vue实例化之前编写好，才能调用，否则报错
要注册一个全局组件，你可以使用 Vue.component(tagName, options)。 例如：
|
Vue.component(‘my-component‘, {
// 选项
})
|
2.局部组件
不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：
|
var Child = {
template: ‘<div>A custom component!</div>‘
}
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
‘my-component‘: Child
}
})
|
这种封装也适用于其它可注册的 Vue 功能，如指令。
??：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<my-component></my-component>
<apptemp></apptemp>
</div>
<script src="js/vue.js"></script>
<script>
//创建全局组件
Vue.component(‘apptemp‘,{
template:‘<span>心中的太阳</span>‘
})
//全局组件必须在Vue实例化之前编写好，才能调用，否则报错
new Vue({
el: ‘#app‘,
data: {
msg: "世界你好"
},
components:{//局部组件
‘my-component‘:{
template:"<h1>你好,我的世界！</h1>"
}
}
})
</script>
</body>
</html>
以上是关于vue-组件的主要内容，如果未能解决你的问题，请参考以下文章