组件插槽

65 阅读1分钟

组件的内容不确定,是由使用者决定的

插槽可以让组件更加灵活

封装组件的核心是 为了复用 数据由外界传入 结构灵活 逻辑灵活

  1. 在src/components中创建了一个MyDialog.vue的组件
    1. 在main.js中全局注册了一下

dec0ae88ccc82fc38cea9428b12904b.png 3. 找一个页面级组件,使用了一下这个MyDialog.vue组件
4. 父向子传值 通过props接收 visible 来控制对话框的显示和隐藏
5. 对话框里面有一个关闭按钮,一点击要实现对话框的关闭,但是我们不能直接在对话框内部去关闭,因为visible这是来自父组件数据,所以需要子向父传值,通过$emit
6. 给面试官说一下v-model和sync
7.组件中为了让内容不是写死的,可以用插槽

adde3ba4fa6a5ae689076a3415b3517.png

image.png

作用域插槽