Vue 插槽之 作用域插槽 - 蓝蓝设计_UI设计公司

帝皇彩票官网

Vue 插槽之 作用域插槽

2019-5-22 释然 前端及开发文章及欣赏

如果您想订阅本博客内容,每天自动发到您的邮箱中,

现在我有如下需求,子组件 <user /> 中此时有一条用户的信息(userInfo);我要在父组件通过插槽展示这个用户的姓名(userInfo.name);

注意:这里的父组件并没有这个用户的信息,子组件中有,如果直接在父组件{{userInfo.name}} 获取这条信息是获取不到的;因为,只有 <user /> 组件可以访问到 userInfo,而我们提供的内容是在父组件渲染的;
模板在哪写,就是用哪里的变量,跟插槽用在哪无关
模板是在父组件中写好,被编译过后,传到子组件的插槽中的

为了让父组件的插槽内容可以读取到子组件的数据,我们可以将userInfo 作为一个 <slot> 元素的特性绑定上去;

// 子组件
const card = {
    data() {
        return {
            userInfo: {name: '宫鑫'}
        }
    },
    template: `
    <div class='card'>
        <!-- 在插槽上绑定子组件的数据 -->
        <slot :userInfo="userInfo"/>
    </div>
    `
};

绑定在 元素上的特性被称为插槽 prop。现在在父级作用域中,我们可以给v-slot带一个值来定义我们提供的插槽 prop 的名字:

// 父组件
template: `
<div>
    <card>
        <template v-slot:default="userInfo">
            用户姓名: {{userInfo}}
        </template>
    </card>
</div>
`

// 输出:
// 用户姓名: { "userInfo": { "name": "宫鑫" } }

蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: VUE 插槽之 作用域插槽

Powered by sitemap
博发彩票登陆 桔子彩票注册 状元彩票官网 大象彩票APP 帝皇彩票 状元彩票官网 博发彩票开户 桔子彩票官网 桔子彩票网址 迪士尼彩乐园