Vue.js的组件就是提高重用性的，让代码可复用。组件与Vue的示例类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后， 任何 Vue 实例都可以使用
在 Vue 中，一个组件本质上是一个被预先定义选项的 Vue 实例
还是直接上代码，详解在注释中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 全局子组件 -->
<my-component></my-component>
<hr>
<!-- 局部子组件 -->
<jb-component></jb-component>
<hr>
<!-- Vue 组件的模板在某些情况下会受到 HTML 的限制，比如＜table＞内规定只允许是〈<tr>、<td> <th>等这些表格元素，所以在＜table＞内直接使用组件是无效的。
这种情况下，可以使用特殊的 is 属性来挂载组件， 示例代码如下：
-->
<!-- tbody 在渲染时， 会被替换为组件的内容。常见的限制元素还有＜ul＞、＜ol＞、＜select> -->
<table>
<tr is="my-component"></tr>
</table>
<hr>
<!-- 带有data函数的全局子组件 -->
<my-component1></my-component1>
<hr>
<!-- 父组件传递固定数据给子组件 -->
<my-component2 name='zhangsan'></my-component2>
<!-- 父组件传递动态数据给子组件 -->
<!-- 由于 HTML 特性不区分大小写，当使用 DOM 模板时，驼峰命名 CamelCase）的 props 名称要转为短横线分隔命名 -->
<my-component2 :user-id='userId'></my-component2>
</div>
<script>
//全局注册组件的方式，放到初始化Vue之前
Vue.component('my-component', {
//放组件内容
//template的 DOM 结构必须被一个元素包含，如果直接写成 “这里是组件的内容”， 不带 “<div></div>”是无法渲染的
template: '<div>这是全局组件内容</div>'
})
//全局子组件除了 template 选项外，组件中还可以像 Vue 实例那样使用其他的选项，比如 data、 computed、 methods 等。但是在使用 data 时， 和实例稍有区别，
//data 必须是函数，然后将数据 return 出去，
Vue.component('my-component1',{
data() {
return {
count:0
}
},
template:'<button @click="count++"> You clicked me {{ count }} times. </button>'
})
// 接收父组件传递数据的全局子组件
Vue.component('my-component2',{
// props用来接收来自父组件传递过来的数据
props:['name','userId'],
//子控件的template中只能有一个根标签
template:'<div><div> {{ name }} </div> <div> {{ userId }} </div></div> '
})
//局部组件注册需要采用components
var Child = {
template: "<div>局部自定义组件</div>"
}
new Vue({
el: "#app",
components: {
'jb-component': Child
},
data:{
age:12,
userId:1
}
})
</script>
</body>
</html>
网友评论