vue组件化（三）父子之间的访问和slot插槽相关知识
$children和$ref
父组件访问子组件使用$children或$ref
this.$children时一个数组类型，它包含所有子组件对象。我们通过遍历可以取出所有子组件的状态。不常用。
$ref比较像getElemengtById 可以直接访问
<body>
<div id="app">
<cpn>cpn>
<cpn ref="bbb">cpn>
<cpn ref="aaa">cpn>
<button @click="btnclick">按钮button>
div>
body>
<template id="cpn">
<div>
我是子组件
div>
template>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el:'#app',
data:{
},
components:{
'cpn':{
template:"#cpn",
data(){
return {
name:'我是子组件的name'
}
},
methods:{
showmessage(){
console.log('aaaa');
}
}
}
},
methods:{
btnclick(){
console.log(this.$children);
this.$children[0].showmessage();
console.log(this.$children[0].name);
//常用$refs
console.log(this.$refs.bbb.name);
}
}
})
script>
$parent和$root
子组件访问父组件可以用$parent 直接访问祖宗可以用$root
<body>
<div id="app">
<cpn>cpn>
div>
body>
<template id="cpn">
<div>
<h2>我是cpm组件h2>
<ccpn>ccpn>
div>
template>
<template id="ccpn">
<div>
<h2>我是子组件h2>
<button @click="btnclick">按钮button>
div>
template>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el:'#app',
data:{
name:'我是vue实例的name'
},
components:{
'cpn':{
template:"#cpn",
data(){
return {
name:'我是cpm组件的name'
}
},
components:{
'ccpn':{
template:'#ccpn',
methods:{
btnclick(){
console.log(this.$root.name);
}
},
}
}
}
},
})
script>
props与$refs区别
- prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
- $ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。
slot
为什么使用slot
组件的插槽：
组件的插槽是为了让我们封装的组件更加具有扩展性
如何封装合适？抽取共性，保留不同。
<body>
<div id='app'>
<cpn><i>喜喜i>cpn>
<cpn><button>按钮button>cpn>
<cpn>cpn>
div>
body>
<template id="cpn">
<div>
<h2>我是组件h2>
<p>woshi zujian ,hhhhhhp>
<slot><button>按钮button>slot>
div>
template>
<script src='../js/vue.js'>script>
<script>
const app = new Vue({
el:'#app',
components:{
cpn:{
template:'#cpn',
}
}
})
script>
具名插槽
当子组件的功能复杂时，子组件的插槽可能并非时一个。这时外面再给插槽插入内容时，如何区分插入的是哪个插槽呢？如下：
1.给slot取名字name
2.在cpn的内元素中设置slot属性为哪个插槽的名称，改变相应插槽的内容
<body>
<div id='app'>
<cpn><span slot="middle">xixispan>cpn>
div>
body>
<template id="cpn">
<div>
<slot name="left"><span>leftspan>slot>
<slot name="middle"><span>middlespan>slot>
<slot name="right"><span>rightspan>slot>
div>
template>
编译作用域
父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译。
作用域插槽 v-slot
父组件替换插槽的标签，但是内容由子组件来提供
<body>
<div id='app'>
<cpn>cpn>
<cpn>
<template v-slot:xixi='message'>
//在父组件中用template进行替换 v-slot:slot名字名字=‘给子组件数据取一个在父组件中的名字’
<span>{{message.data.join('--')}}span> //父组件访问子组件数据名称里的数据
template>
cpn>
div>
body>
<template id="cpn">
<div>
<h2>我是h2>
<slot name="xixi" :data="planguages">
//给slot取名字name 再给子组件中的数据绑定名字为:data
<ul>
<li v-for="item in planguages">{{item}}li>
ul>
slot>
div>
template>
模块化
匿名函数解决了块级作用域的问题，但是没有解决函数复用的问题。办法：
①在匿名函数内部，定义一个对象
②给对象添加各种需要暴露在外面的属性和方法（不需要暴露的直接定义即可）
③最后将这个对象返回，并且在外面使用一个MoudleA接收
最后我们只需要在main.js中使用自己的模块的属性和方法就可以了。
commonJS
导出：
module.exports = {
flag,
sum,
}
导入:
var {flag,sum} = require('./aaa.js')
var aaa = require('./aaa.js');
var flag = aaa.flag;
var sum = aaa.sum