具名插槽：
具名插槽可以用一个特殊属性name，配置分发的内容，多个具名插槽可以有不同的名字
具名函数在HTML代码列举了三种实现方式，萝卜白菜各有所爱，那个适合自己用那个
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <baibai> <!--第一种方式--> <div slot="tou">头部内容，旧语法，据说2.6.0后废弃，但是我2.7.0还能使用</div> <!--第二种方式--> <template #shenti> <div> 身体内容，新语法，缩写 </div> </template> <!--第三种方式--> <template v-slot:jiao> 脚部内容，新语法 </template> </baibai><!--使用--> </div> </body> <script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址--> <script> var baibai={//声明 template:`<div> <slot name="tou"></slot> <slot name="shenti"></slot> <div>拜拜{{name}}<div> <slot name="jiao"></slot> </div>`, data() { return { name:"小明" } } } let app=new Vue({ el:"#app", components:{ baibai//注册 }, }) </script> </html>
浏览器结果：
父子组件通信：
在Vue中父子传值也是非常重要的一个操作，用好了代码编写起来会更简便。
简单粗暴型$refs和$parent:
这两个属性的作用是获取到子组件实例数组和父组件实例。
有了实例，就可以很方便的操作组件的属性和方法。
$refs父组件获取子组件数据：
$refs的使用需要，在子元素上通过ref属性声明自己的引用名
写法：
<dawa ref="dawa"></dawa><!--子类的组件；ref声明的名称父组件中要通过它来获取数据-->
下面这个实例是在父组件写了一个按钮绑定点击事件来操作子组件的age数据让其加一
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 你好，{{name}} <dawa ref="dawa"></dawa><!--里面ref属性不写的话就传不了值--> <button type="button" @click="AgeFun">子类年龄+1</button><!--在父类里面写的按钮--> </div> </body> <script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址--> <script> var dawa={ template:` <div> 子组件----{{childName}}--{{age}} </div> `, data() { return { childName:"大娃", age:18, } }, } let app=new Vue({ el:"#app", data() { return { name:"父类" } }, methods: { AgeFun(){ //拿到子组件的age值并且+1 this.$refs.dawa.age=this.$refs.dawa.age+1 } }, components:{ dawa }, }) </script> </html>
下面的这个结果是我点击了两次后的结果
浏览器结果：
也可以在浏览器控制台获取父组件数据：
$parent子组件获取父组件数据：
每个子组件只有一个父组件，子组件可以直接通过$parent就可以拿到父组件的数据不用声明去父组件名
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 你好，{{name}} <dawa></dawa> </div> </body> <script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址--> <script> var dawa={ template:` <div> 子组件----{{childName}}--{{age}} <!--在子组件中写了一个按钮操作修改父类的name属性--> <button type="button" @click="updateFu">改父类名</button> </div> `, data() { return { childName:"大娃", age:18, } }, methods: { updateFu(){ this.$parent.name="爹爹"//点击后修改父类名称改为爹爹 } }, } let app=new Vue({ el:"#app", data() { return { name:"父类" } }, components:{ dawa }, }) </script> </html>
下面的这个结果是我点过后的结果
