使用vue的插槽理解

2023-03-12,,

使用插槽的时候其实就是引用子组件,在引用的组件中间写上你要的代码,然后在子组件的的<slot ></slot>中就包含父组件写下的代码。

父组件

import addshop from './addshop.vue' //引入子组件
//使用子组件
<addshop v-slot="obj" :pu = 'msg'>//v-slot 接受的是子组件传过来的值 ,pu是随便取的名字,用户自定义的是传给子组件的值(变量)
<span>你是不是傻</span>
<p>{{obj.id}}</p>//子组件传过来的obj在标签里面
</addshop>

子组件

  <slot :id = 'id'></slot>//传给父组件的值记得和父组件接受组件名字一致

props:['pu'],//父组件传来的值要接受

使用vue的插槽理解的相关教程结束。

《使用vue的插槽理解.doc》

下载本文的Word格式文档,以方便收藏与打印。