|
目录
1.组件机制
2.组件注册
3.组件传值
1.组件机制
组件是Vue.js最强大的功能之一，可以扩展html元素，封装可重复使用的代码在较高层面上，组件是自定义元素，Vue的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。组件注册的时候需要为该组件指定各种参数。
组件具有以下特点：（1）：组件可以进行任意次数的复用。（2）组件的data必须是一个函数，确保每个实例可以维护一份被返回对象的独立的拷贝，也就是任何一个组件的改变不会影响到其他组件。
2.组件注册
想要进行组件使用就要先进行组件的注册，组件注册有两种方式，一种是全局注册，另一种是局部注册。
全局注册：可以使用Vue.component(tagName, options) 注册一个全局组件, 注册之后可以用在任何新创建的 Vue 根实例的模板中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 3.使用组件 -->
<my-a></my-a>
<my-b></my-b>
</div>
<script>
// 1.定义组件
let myA = {
template: `
<div>{{msgA}} </div>
`,
data(){
return{
msgA: '我是子组件'
}
}
}
let myB={
template:`<div>B组件 <my-a></my-a> </div>`
}
// 2.注册组件
// 2.1全局注册
Vue.component('my-a', myA)
Vue.component('my-b', myB)
let vm = new Vue({
el: '#root',
data: {
msg: '我是一个父组件'
},
methods: {
}
})
</script>
</body>
</html>
局部注册：局部注册的组件只能在当前组件中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 3.使用组件 -->
<my-a></my-a>
<my-b></my-b>
</div>
<script>
// 1.定义组件
let myA = {
template: `
<div>{{msgA}} </div>
`,
data(){
return{
msgA: '我是子组件'
}
}
}
let myB={
components:{
'my-a':myA,
},
template:`<div>B组件 <my-a></my-a> </div>
`
}
// 2.注册组件
let vm = new Vue({
// 2.2局部注册 只能在根组件使用
components:{
'my-a':myA,
"my-b":myB
},
el: '#root',
data: {
msg: '我是一个父组件'
},
methods: {
}
})
</script>
</body>
</html>
3.组件传值
在这里介绍组件之间的相互通信的两种情况
父组件向子组件传值
父组件传值给子组件的步骤：
? ? ? ? 1.在子组件标签上写入传入的值，此时又两种写法
? ? ? ? （1）静态传参： <my-a ms="msg"></my-a>
? ? ? ? ? ms相当于变量名，msg是传进去的值，props:[]存放变量名
? ? ? ? （2）动态传参:<my-a :mg="msg" :obj="{name:'zhansan'}" ?:a="[1,2,3,4]"></my-a> 写法----- ? ?:变量名='数据'
? ? ? ? ?动态传参可以传入多重数据类型，例如数组，对象等。。。
? ? ? ? 2.在子组件中用props:[]接收父组件传入的值
? ? ? ? 3.子组件可以对父组件传入的值做类型判断
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 静态传参 -->
<!-- <my-a ms="msg"></my-a> -->
<!-- <my-a :mg="msg" :obj="{name:'zhansan'}" :a="[1,2,3,4]"></my-a> -->
<!-- 动态传参 -->
<my-a :mg="msg" :obj="{name:'zhansan'}" :a="[1,2,3,4]" :age="25" ></my-a>
</div>
<script>
let myA={
// props:['ms'],
// props:['mg','obj','a'],
props:{
// 可以设置父组件传入的参数的类型，进行类型校验，
// 如果父组件传入的值和设置的数据类型相匹配，就不会报错，否则会在控制台报错
// 可以进行多个类型值的校验,也可以自定义校验规则
age:{
type:[Number,String,Boolean],
// 自定义校验器规则
validator(val){
return val>20
// val>20的时候返回val的值，否则报错
}
},
mg:String,
a:{
type:Array,
dafault(){
return[4,5,6]
}
}
},
template:` <div>
我是一个子组件
{{mg}}---{{typeof mg}},
{{age}}---{{typeof age}},
{{a}}
</div>`,
data(){
return{
msgA:'这是一个子组件'
}
}
}
let vm = new Vue({
components:{
'my-a':myA
},
el: '#root',
data: {
msg: '我是一个父组件'
},
methods: {
}
})
</script>
</body>
</html>
子组件向父组件传值
子组件给父组件传值:
? ? ? ? ? ? 子组件给父组件传值用的是发射事件（自定义事件）
? ? ? ? ? ? 发射事件的方法： $emit('发射事件的名称'，传递的参数)
? ? ? ? ? ? 1.子组件通过emit发射自定义事件
? ? ? ? ? ? 2.在父组件中使用子组件的标签定义自定义事件
? ? ? ? ? ? 3.在vue实例的方法中声明方法并接收参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<div id="root">
<my-a @my-event="handel"></my-a>
</div>
<script>
let myA = {
template: `
<div>
子组件
<button @click="toSend">子组件传值给父组件</button>
</div>`,
// 绑定事件，点击按钮触发toSend方法，执行发射事件，将子组件的参数发射出去，
// 在父组件中使用子组件的标签定义自定义事件，绑定一个方法，在父组件的方法体里面声明并接收子组件传进来的参数，完成子组件向父组件的数据传输
data() {
return {
sumMsg: '我是一个子组件,我要给父组件传值'
}
},
methods: {
toSend(){
this.$emit('my-event',this.sumMsg)
}
}
}
let vm = new Vue({
components: {
'my-a': myA
},
el: '#root',
data: {
msg: '我是一个父组件'
},
methods: {
handel(e){
console.log(e,'这是子组件的值');
}
}
})
</script>
</body>
</html>
|