提示:以下是本篇文章正文内容,下面案例可供参考
一、组件
一.概述
组件可以简单的理解为模块化的单元,是vue.js最强大的功能之一,是html、css、js等的一个聚合体,封装性特别强。可以解决某些功能,页面等频繁调用,提高代码的重用性。
在vue环境下搭建项目,每一个组件都是一个单独的文件,但最终运行都会放在一个页面上
通过vue制作单页面应用程序(spa)
二.组件构建
组件都有的三步骤:声明组件、注册组件、 使用组件
全局组件除外,全局组件声明时已经注册了 (vue实例其实就是最大的根组件)
1.全局组件
将组件注册到根实例(根组件)上,那么这个组件就是全局组件。全局组件可以被任意使用。
在不同作用域下都可以使用的组件
语法格式:
app.component('组件名称',{组件内容})
示例:
app.component('hello',{
template:`
<div>{{name}}</div>
`,
data(){ //这边也是可以加data以及其他的各种主属性例:methods、computed
return {
name:"Hello,Vue"
}
}
})
/********* 使用 **********/
// 自定义的标签,在vue项目中,称为组件
<hello></hello>
↓
浏览器结果
2.局部注册
将组件注册到某个组件的内部,通过 components 属性完成
局部组件只能在当前注册的组件使用
示例:
let app = Vue.createApp({
component:{
"my-hello":{
template:`
<button @click="count++">{{count}}</button>
`,
data(){
return{
count:100
}
}
}
}
})
↓ 浏览器结果
3.组件的一些属性
1> 组件名
组件名称两种风格:
> my-button (推荐)
> MyButton
2> 组件中第二个参数属性
- template 定义组件的结构样式 注意 : 组件可以有多个根节点,尽量就一个
- 与 vue示例中的可以写的属性一样,并且,每个组件都是一个独立的作用域,都会
维护自己的状态,不必担心起冲突
二、props属性
组件与组件之间不是完全独立的,而是有交集的,组件与组件之间可以传递数据,通过props属性可以让子组件接收父组件传递过来的数据
1.组件传递数值—(父传子)
一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。你会发现我们能够在组件实例中访问这个值,就像访问 data 中的值一样。
例如:
let app = Vue.createApp({ // 注册组件
component('post',{
props:['title'],
template:`<h4>{{title}}</h4>`
})
})
// 组件使用
<div>
<post title=" Hello Vue "></post>
<post title=" Hello Web "></post>
<post title=" Hello World "></post>
</div>
通过v-bind
可动态传递prop
无论是静态绑定还是动态绑定都遵循单向数据流通规则:所有的prop都使其父子prop之间形成了一个单向下行绑定:父级prop的更新会向下流向到子组件中,但是反过来则不行。这样会防止从子组件意外变更到父级组件的状态,从而导致应用的数据流向难以理解
例如:
//组件内使用父级传输的值
porps:['count'],
template:`
<button @click="count++">{{count}}</button>
`
//父组件传值
<my-button :count='1'></my-button>
当点击按钮时,不会改变数字;因为子组件可以使用父组件传递过来的数据,但是绝对不能修改传递过来的数据
2.关于props的使用
props用来传递一个初始值,子组件希望作为本地的prop数据使用,在本地定义一个数值,作为prop的初始值
例如:
props:['count'],
template:`
<button @click="counter++">{{counter}}</button>
`,
data(){
return{
counter : this.count
}
}
在本地中存入存入数据作为初始值使用
3.关于props传递时的类型
type:可以是下列原生构造函数中的一种:String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组
default:指定默认值。如果该 prop 没有被传入,则换做用这个值。对象或数组的默认值必须从一个函数返回。
required:Boolean 用户定义该 prop 是否是必填项。
validator:Function
4.监听prop变化
如果来自父组件的prop发生了变化,在子组件生命周期beforeUpdate、updated能够监听到,通常子组件监听数据变化用watch监听数据变化
5.非Prop的 Attribute
指传向一个组件,但是该组件并没有相应 prop 定义的 attribute。
<my-btn :active="active" class="article" className="btn"/>
↓
class将会自动挂载到子组件组件的组件根元素上,组件可以接受任意的 attribute
禁用Attribute
inheritAttrs: false 选项不会影响 style 和 class 的绑定。
通过inheritAttrs: false 和 组件的$attrs,可以手动决定 attribute 被赋予哪个元素