Vue封装组件

Vue组件的API来自三部分

  • props参数--传递数据给组件
  • slot定制模板--外部模板混合子组件模板
  • event自定义事件--监控子组件交互状态

先把DOM和样式写好 --> 考虑哪些是可以被定制的 --> 写模板 --> 自定义事件

摆上html

<div id="app">
    <div class="modal-header">
        <h4>这是标题</h4>
    </div>
    <div class="modal-content">
        <div>在这里添加内容</div>
    </div>
    <div class="modal-footer">
        <input class="btn blue"  type="button" value="确定" />
        <input class="btn"  type="button" value="取消" />
    </div>
</div>

考虑哪些可以被定制

设置的props:
    modelTitle    提醒信息 默认为‘这是一个标题’
定制模板:
    slot为model-content    定制提醒信息模板
    slot为model-footer    定制底部模板
监控子组件状态变化:
    事件名on-ok    点击确定触发
    事件名on-cancel    点击取消触发

开始写模板: 思路--> model-header设置props
model-contentmodel-footer里设置slot

<div id="app">
    <m-model model-title="提醒"></m-model>
    <m-model>
        <ul slot="model-content">
            <li v-for="item of list">{{item}}</li>
        </ul>
        <div slot="model-footer">
            <span>确定</span>
            <span>取消</span>
            <span>重置</span>
        </div>
    </m-model>
</div>
<script>
    Vue.component("m-model",{
        props:{
            modelTitle: {
                type: String,
                default: '这是一个模态框'
            }
        },
        template:`
            <div class="model">
                <div class="model-header">
                    <h4>{{modelTitle}}</h4>
                </div>
                <div class="model-content">
                    <div>
                        <slot name="model-content">在这里添加内容</slot>
                    </div>
                </div>
                <div class="model-footer">
                    <slot name="model-footer">
                        <input class="btn blue"  type="button" value="确定" />
                        <input class="btn"  type="button" value="取消" />
                    </slot> 
                </div>
            </div>
        `
    })  
    var list = [1,2,3,4];
    new Vue({
        el:"#app",
        data:{
            list:list
        }
    })
</script>

再自定义事件

<div id="app">
    <!-- 3.父组件绑定自定义监听事件 -->
    <m-model model-title="提醒" @on-ok="ok" @on-cancel="cancel" ></m-model>
    <m-model>
        <ul slot="model-content">
            <li v-for="item of list">{{item}}</li>
        </ul>
        <div slot="model-footer">
            <span>确定</span>
            <span>取消</span>
            <span>重置</span>
        </div>
    </m-model>
</div>
<script>
    Vue.component("m-model",{
        ···
        template:`
            <div class="model">
                ···
                <div class="model-footer">
                    <slot name="model-footer">
                        <!-- 1.子组件绑定监听函数 -->
                        <input class="btn blue"  type="button" value="确定" @click="okHandler" />
                        <input class="btn"  type="button" value="取消" @click="cancelHandler"/>
                    </slot> 
                </div>
            </div>
        `,
        methods:{
        /* 2. 子组件的监听函数中用$emit自定义事件 */
            okHandler(){
                this.$emit("on-ok")
            },
            cancelHandler(){
                this.$emit("on-cancel")
            }
        }
    })  
    var list = [1,2,3,4];
    new Vue({
        el:"#app",
        data:{
            list:list
        },
        methods:{
        /* 4. 父组件定义事件启动后要做的事 */
            ok(){
                alert("ok")
            },
            cancel(){
                alert("cancel")
            }
        }
    })
</script>

最终效果

Comments
Write a Comment