Vue props、插槽

旧城等待， 2022-01-05 17:37 322阅读 0赞

1.props 子组件接受父组件传递过来的数据

通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

props: {
      title: String,//
      likes: Number,
      isPublished: Boolean, commentIds: Array, author: Object, callback: Function, } 静态props <div title=“组件”>父组件<div> export default{ 　　props：{ 　　title: String
    　　}
    }

动态props
    <div ：age='age'>父组件<div>
    export default{
        
    　　props：{
        
    　　title: String
    　　}
    }
    
    2.访问根实例

new Vue(\{

data()\{

return\{

foo:"aoshilin"//foo可以在任何子组件中访问(访问根实例)

\}

\},

render: h => h(App),

\}).$mount('\#app')

任意组件访问根实例：

computed:\{

getfool()\{

return this.$root.foo

\}

\}

任意组件写入根实例：

computed:\{

getfool()\{

return this.$root.foo=‘wangsicong’

\}

\}

操作原声dom

mounted（）\{

this.$refs. p1.innerHTML="改变p1的内容"

\}

3.插槽

插槽（内容分发），谁调用它他就给谁内容

父级组件传递数据

<div class=‘parent’>

<child>

<div>hello 插槽</div>

</child>

</div>

子级组件

<div class=“child”>

<slot>展示内容 </slot>

</div>

具名插槽

父级组件传递数据

<template>

<div class="parent">

<child slot="v1">

<template>

<p>这个父组件的数据</p>

</template>

</child>

</div>

</tempate>

子组件

<solt name="v1">默认信息</solt>//没数据传递默认信息

<solt name="v1">\{ \{meg\}\}</solt>//meg是·在父组件里面就定义的，即使在自组件定义一样的也没用

结果：这个父组件的数据

作用域插槽

父级组件传递数据

<template>

<div class="parent">

<child>

<template slot-scope="slotpeops">

<p>\{ \{slotprops.ct\}\}</p>//父组件展示效果

</template>

</child>

</div>

</tempate>

子组件

<slot ct="儿子的数据<slot>//展示的内容是子组件决定的，效果由父组件决定。

new Vue(\{

data()\{

return\{

foo: "aoshilin" //foo可以在任何子组件中访问(访问根实例)

\}

\},

render : h => h( App),

\}). $mount( '\#app')

转载于:https://www.cnblogs.com/aoshilin/p/10720230.html

发表评论取消回复

表情：

评论列表（有 0 条评论，322人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue插槽---默认插槽、具名插槽、作用域插槽

目录总结 1.默认插槽 2.具名插槽 3.作用域插槽一、不使用插槽的效果 App.vue Category.vue 二、默认插槽 App.vue

浅浅的花香味﹌/ 2024年04月06日 10:08/ 0 赞/ 104 阅读

相关 vue 插槽有名插槽

<body> <div id="app"> <base-layout> <p slot='header'>标题信息</p

红太狼/ 2023年01月08日 04:23/ 0 赞/ 247 阅读

相关 vue插槽

文章目录 vue插槽插槽内容编译作用域后备内容具名插槽已废弃的slot attr

不念不忘少年蓝@/ 2022年12月29日 01:36/ 0 赞/ 204 阅读

相关 Vue--插槽

原文网址：[Vue--插槽\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址 > [深入了解组件 - 插槽 - 《Vue.js v2.x

柔情只为你懂/ 2022年12月21日 15:50/ 0 赞/ 228 阅读

相关 Vue - 插槽

推荐：[Vue汇总][Vue] Vue - 插槽如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue - Vue] 在2.6.0中，为具名插

野性酷女/ 2022年12月21日 15:47/ 0 赞/ 223 阅读

相关 vue 插槽

插槽匿名插槽：在注册的父组件： <div> //子组件 <child> <tempalte

水深无声/ 2022年12月13日 11:17/ 0 赞/ 189 阅读

相关【Vue】—解构插槽 Prop以及具名插槽的缩写

【Vue】—解构插槽 Prop以及具名插槽的缩写 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

以你之姓@/ 2022年08月29日 00:09/ 0 赞/ 196 阅读

相关 Vue props、插槽

1.props 子组件接受父组件传递过来的数据通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名

旧城等待，/ 2022年01月05日 17:37/ 0 赞/ 323 阅读

相关 Vue插槽

插槽新语法插槽内容编译作用域后备内容具名插槽作用域插槽独占默认插槽的缩写语法解构插槽 Pro

水深无声/ 2021年10月20日 01:22/ 0 赞/ 368 阅读

相关 Vue插槽

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

旧城等待，/ 2021年08月19日 11:57/ 0 赞/ 454 阅读