介绍
vue中使用组件的三大步骤：
- 创建组件
- 注册组件
- 使用组件【写组件标签】
一. 如何创建组件【定义组件】
使用Vue.extend({xxx}),其中的xxx跟new Vue{(xxx)}基本一致
局别：
- 不能写el的挂载，因为组件最终都要归顺于vm管理，其中的el挂载对象看vm中的
- data必须写成函数式、返回对象数据，因为在组件被多个vm使用时，防止数据改变而全部改变的问题
- 注意使用template配置组件的结构
二. 如何注册组件
- 局部注册：在new Vue中，配置一项components选项
- 全局注册：在js中使用Vue.component(‘组件名’，组件)
三.使用组件
<组件名></组件名>
<school></school>
例子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../kj/vue.js"></script>
</head>
<body>
<div id='root'>
<school></school>
<xuesheng></xuesheng>
<laoshi></laoshi>
</div>
<script>
const school = Vue.extend({
template:`
<div>
<h1>{{name}}</h1>
</div>
`,
data(){
return{
name:'xxx大学'
}
}
})
const student = Vue.extend({
template:`
<div>
<h1>{{name}}</h1>
</div>
`,
data(){
return{
name:'张三'
}
}
})
const teacher = Vue.extend({
template:`
<div>
<h2>{{name}}</h2>
</div>
`,
data(){
return{
name:'我是老师'
}
}
})
Vue.component('laoshi',teacher)
const vm = new Vue({
el:'#root',
components:{
school,
xuesheng:student
},
data:{
}
})
</script>
</body>
</html>
4900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
