一周精通Vue（二）组件访问、插槽、组件作用域、模块化
组件之间的访问方式 $children 父组件通过 this.$children[index] 可以访以对象的形式问子组件 一般来说index取值会有不稳定性 $.refs（常用） 父组件通过 this.$refs.name name为ref的值 通过给子组件添加ref属性来获取自定组件对象 去操作 $.parent 子组件通过 this.$parent 访问父组件 拿到父组件对象 $.root 子组件通过 this.$root方法来访问根组件 即Vue实例 插槽 slot 标签 表示这个是一个插槽 基本使用：<slot></solt> 如果有多个值，同时放入到组件进行替换时 一起作为替换元素 <div id="app"> <cpn> <!-- 插槽赋值--> <button> 按钮</button> </cpn> <!-- 默认会将所有内容替换到插槽--> <cpn> <div>我是div</div> <button>新按钮</button> </cpn> <!-- 执行插槽替换--> <cpn> <button slot="s1">这个s1插槽的按钮</button> </cpn> </div> <template id="my-cpn"> <div> <!-- 设置插槽的默认值--> <slot>我是一个插槽</slot> <!-- 如果要使用多个插槽就需要给每个插槽指定name属性--> <slot name="s1">我是一个插槽</slot> <slot name="s2">我是一个插槽</slot> </div> </template> <script> const vm = new Vue({ el: "#app", data: {}, components: { cpn: { template: '#my-cpn', data() { return {name: '子组件'} } } } }); </script> 组件的作用域在当前模板内不管引用任何组件 只要使用到变量 一定是当前模板所绑定的组件每一个模板之间的作用域是相互隔离的，如果想引用子组件的数据就需要进行 template引用 作用域插槽父组件替换插槽的标签，但是内容由子组件来提供template引用： 在子组件模板中使用 来绑定子组件内的数据 然后在引用处 使用 进行引用子组件插槽对象 通过 slot.data 获取子组件的数据对象 模块化 为什么要用模块化？ 由于全局变量不同文件之间的变量相互影响 导致变量覆盖 ES6的模块化 导入和导出 // file : a.js var name = 'tim' var age = 23 function sum(num1, num2){ return num1 + num2; } // 导出 方式1 export { name, age, sum } // 导出 方式2 export var num1 = 100 export var page = 10 // 导出方法 export function sub (n1, n2){ return n1 - n2 } // 导出类 export class dog { run(){ console.log('奔跑'); } } export default sum() // export default 导出的内容只有一个 也只能有一个 // file : b.js // 导入 import {name, age, num1} from './a.js' console.log(name); console.log(age); console.log(num1); console.log(sub(num1, age)); // 导入 export default 内容 import sm from './a.js' sm(1, 2) // 如果要使用export 和 import // 就必须要在引入js的时候设置 type='module' 属性 // 全部导入 import * from './a.js' 补充 v-slot 在vue v2.6.0中，新引入了v-slot指令，他取代了slot和slot-scope这两个目前已经被废弃但是为被移除的特性 // 根组件 <template> <div> <mo> <template v-slot:header="slotProps"> <h1>{{slotProps.header + ' ' + msg}}</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template v-slot:footer> <p>Here's some contact info</p> </template> </mo> </div> </template> <script> import mo from './module.vue' export default { components: { mo }, data() { return { msg: '这是根组件的消息' } } } </script> // 子组件 <template> <div> --header start-- <header> <slot name="header" :header="header"></slot> </header> --header over-- <div></div> --default start-- <slot></slot> --default over-- <div></div> --footer start-- <footer> <slot name="footer"></slot> </footer> --dooter over-- </div> </template> <script> export default { data() { return { header: '来自子组件的头部消息' } } } </script> <style scoped> </style> 组件中可以使用template标签，加v-slot指令制定具名插槽，当没有指定插槽name时，默认出口会带有隐含的名字“default”。 根组件可以利用v-slot:header="slotProps"接受组件中的消息，组件中只需要在就可以了 如果被提供的内容只有一个默认插槽时，组件的标签可以直接被当做插槽的模板来使用 动态参数也可是使用到插槽当中 v-slot的缩写是#，但是如果使用#的话，必须始终使用具插槽来代替
