一.组件嵌套
组件嵌套：在一个组件中使用另一个组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<base-temp1></base-temp1>
</div>
<template id="base1">
<div>
<h1>这是BaseTemp1组件</h1>
<base-temp2></base-temp2>
</div>
</template>
<template id="base2">
<h1 style="color: red">这事BaseTemp2组件</h1>
</template>
<script>
// 创建组件
let BaseTemp2 = {
template: "#base2"
}
// 创建组件
let BaseTemp1 = {
template:"#base1",
components: {BaseTemp2}
}
// 创建Vue实例【创建Vue组件】
new Vue({
el:"#app",
components:{BaseTemp1}
});
// Vue组件>>>base1>>>base2
</script>
</body>
</html>
二.组件通信
1.父传子
1.1声明属性
在子组件中通过props声明属性用于接收数据
在子组件中通过props声明属性用于接收
let BaseTemp2 = {
template: "#base2",
// props:["msg"]
/*props:{
msg:Number
}*/
props:{
msg:{
type:String,
required:true,
default:"null"
}
}
}
1.2传递数据
在父组件中使用子组件时，通过v-bind进行传递数据
<!-- 使用子组件 传递参数-->
<base-temp2 :msg = "message"></base-temp2>
1.3使用数据
<h1>{{msg}}</h1>
2.子 传父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<fu-component></fu-component>
</div>
<template id="fu">
<div>
<h1 style="color:red;">{{value}}</h1>
<!-- 自定义事件 = 父组件函数 -->
<zi-component @demo="handleFu"></zi-component>
</div>
</template>
<template id="zi">
<div>
<h1>子组件</h1>
<button @click="setData">给父组件传参</button>
</div>
</template>
<script>
// 子组件
let ZiComponent = {
template:"#zi",
methods:{
setData(){
// 子传父
// 参数一：自定义事件
// 参数二：要传递的数据
// 执行demo事件并传递参数【执行demo事件绑定的函数并传递参数】
// 执行子组件上的demo事件绑定的函数并传递参数
// demo事件是子组件自定义的事件
// 绑定的函数是父组件中的函数
this.$emit("demo",123);
// 子组件其实是把数据当成参数传递给父组件中的函数
// 子组件执行我自己的自定义事件
// 自定义事件绑定了父组件中的函数
}
}
}
// 父组件
let FuComponent = {
template:"#fu",
data:function () {
return {
value:"这是父组件"
}
},
components:{ZiComponent},
methods:{
handleFu(params){
// alert(params)
this.value = params
}
}
}
new Vue({
el:"#app",
components: {FuComponent}
});
</script>
</body>
</html>
3.父子通信扩展
父子通讯可以通过其他方式：children、refs、parent、root
| 属性 |
描述 |
| $children |
获取所有的子组件 |
| $refs |
获取标签对象 |
| $el |
获取标签名 |
| $data |
获取组件中的data属性 $data == data |
| $root |
获取根组件 |
| $set |
设置数组 |
| $parent |
获取父组件 |
