您现在的位置是:首页 > 文章详情

一周精通Vue(二)组件访问、插槽、组件作用域、模块化

日期:2019-12-23点击:317

组件之间的访问方式

  • $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引用:

    1. 在子组件模板中使用 来绑定子组件内的数据
    2. 然后在引用处 使用 进行引用子组件插槽对象
    3. 通过 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> 
  1. 组件中可以使用template标签,加v-slot指令制定具名插槽,当没有指定插槽name时,默认出口会带有隐含的名字“default”。
  2. 根组件可以利用v-slot:header="slotProps"接受组件中的消息,组件中只需要在就可以了
  3. 如果被提供的内容只有一个默认插槽时,组件的标签可以直接被当做插槽的模板来使用
  4. 动态参数也可是使用到插槽当中
  5. v-slot的缩写是#,但是如果使用#的话,必须始终使用具插槽来代替
原文链接:https://yq.aliyun.com/articles/740511
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章