好家伙,
1.作用域插槽
插槽在定义的时候,可以定义一些属性,便于在父组件中使用
来看看代码:
Article.vue组件中:
<template> <div class="article-container"> <!-- 文章内容 --> <div class="header-Box"> <!-- 在封装组件时,为预留的<slot></slot>提供对应的值, 这种用法叫做"作用域插槽" --> <slot name="title" msg="我是msg属性"></slot> </div> <!-- 文章标题--> <div class="content-Box"> <slot name="content"></slot> </div> <!-- 文章作者 --> <div class="footer-Box"> <slot name="author"></slot> </div> </div> </template>
App.vue组件中:
<template> <div> <h1>App根组件</h1> <Article> <template #title="obj"> <h3>我是头</h3> <p>{{ obj }}</p> </template> <template #content> <h3>写博客真是一件开心的事情(NO)</h3> </template> <template #author> <h3>作者:养肥胖虎</h3> </template> </Article> </div> </template>
截图如下:
msg的值是在子组件中定义的,
父组件中拿到msg的值,
再在子组件中把它渲染出来,
无形中完成了一次子父传值
2.作用域插槽的结构赋值
将Article.vue组件中的代码改为:
<template> <div class="article-container"> <!-- 文章内容 --> <div class="header-Box"> <!-- 在封装组件时,为预留的<slot></slot>提供对应的值, 这种用法叫做"作用域插槽" --> <slot name="title" msg="我是msg属性" :user="userinfo"></slot> </div> <!-- 文章标题--> <div class="content-Box"> <slot name="content"></slot> </div> <!-- 文章作者 --> <div class="footer-Box"> <slot name="author"></slot> </div> </div> </template> <script> export default { name:'Article', data(){ return{ //用户信息对象 userinfo:{ name:'zs', age:20 } } } } </script>
在App.vue组件中:
<template> <div> <h1>App根组件</h1> <Article> <template #title="{ msg,user }"> <h3>我是头</h3> <p>{{ msg }}</p> <p>{{ user }}</p> <p>{{ user.name }}</p> </template> <template #content> <h3>写博客真是一件开心的事情(NO)</h3> </template> <template #author> <h3>作者:养肥胖虎</h3> </template> </Article> </div> </template>
搞定后:
That's all
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。