Vue入门基础2
程序员文章站
2022-06-28 18:17:42
组件化开发大型应用的时候，页面往往拆分成为多个部分，这些部件可能会被多个页面使用，所以有必要对这些部件进行组件化。在Vue里，所有的Vue实例都是组件。全局组件通过Vue.component()来定义一个全局组件。使用示例：
组件化
开发大型应用的时候，页面往往拆分成为多个部分，这些部件可能会被多个页面使用，所以有必要对这些部件进行组件化。
在Vue里，所有的Vue实例都是组件。
全局组件
通过Vue.component()来定义一个全局组件。
使用示例：
<body>
<div id="app">
<counter></counter>
<counter></counter>
<counter></counter>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.component("counter",{
template:'<button @click="num++">点击次数：{{num}}</button>',
data(){
return{
num:0
}
}
})
var app = new Vue({
el: "#app",
data: {
num:0
},
})
</script>
- 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
- 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
- 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
- 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
- data必须是一个函数，不再是一个对象。
组件复用
在上面的代码中，我们使用全局组件的时候，
<div id="app">
<counter></counter>
<counter></counter>
<counter></counter>
</div>
我们点击按钮，发现它们的值相互之间不干涉，为什么呢？
在定义全局组件的时候，我们是用函数来定义data数据的，因此每个实例可以维护一份被返回对象的独立的拷贝：
data(){
return{
num:0
}
}
局部组件
一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。因此，对于一些并不频繁使用的组件，我们会采用局部注册。
使用示例：
<body>
<div id="app">
<hello1></hello1>
<hello1></hello1>
<hello1></hello1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const hello = {
template: '<button @click="num++">点击次数：{{num}}</button>',
data(){
return{
num: 0
}
}
}
const app = new Vue({
el: "#app",
data: {
num: 0
},
components:{
hello1: hello
}
})
</script>
- components就是当前vue对象子组件集合。
- 其key就是子组件名称
- 其值就是组件对象名
- 效果与刚才的全局注册是类似的，不同的是，这个hello1组件只能在当前的Vue实例中使用。
组件通信
通常一个单页应用会以一棵嵌套的组件树的形式来组织：
- 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
- 左侧内容区又分为上下两个组件
- 右侧边栏中又包含了3个子组件
各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。
父向子通信
- 父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
- 子组件通过props接收父组件数据，通过自定义属性的属性名
使用示例：
<body>
<div id="app">
<hello1 v-bind:num1="num" title="title"></hello1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const hello = {
template: '<button @click="num1++">点击次数：{{num1}}</button>',
props: ["num1"]
}
const app = new Vue({
el: "#app",
data: {
num:0
},
components: {
hello1: hello
}
})
</script>
props验证
验证父组件传递的数据模型是否是子组件需要的：
const hello = {
template: '<button @click="num1++">点击次数：{{num1}}</button>',
props: {
num1: {
type: Number,
default: 0,
required: true
}
}
}
定义一个复杂类型，例如数组，验证示例：
<body>
<div id="app">
<hello :items="items"></hello>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const hello = {
template: '<ul><li v-for="(item,index) in items" >第{{index+1}}个按钮是：{{item}}</li><br></ul>',
props: {
num1: {
type: Number,
default: 0,
required: true
},
items:{
type: Array,
default: [],
required: true
}
}
}
const app = new Vue({
el: "#app",
data: {
// num: "abc"
num: "123",
items:["变大","变小","变长"]
},
components: {
// hello1: hello //组件名的key和value一样时，可只写一个
hello
}
})
</script>
PS1：v-for只能使用在<ul><li></li></ul>的<li>的类似结构里，不能直接作用与<li>里。
PS2：子组件的自定义属性，必须使用v-bind进行绑定
本文地址：https://blog.csdn.net/Ur_Eyes_/article/details/108917278