VUE自定义组件

王翼鹏

已于 2023-05-26 19:05:20 修改

阅读量135

点赞数

分类专栏： JavaScript 文章标签： vue

于 2021-08-16 16:46:15 首次发布

本文链接：https://blog.csdn.net/zghnpdswyp/article/details/119736777

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="full-screen" content="yes"/>
    <meta name="browsermode" content="application"/>
    <meta name="x5-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="referrer" content="no-referrer"/>
    <meta name="x5-page-mode" content="app"/>

    <meta name="format-detection" content="telephone=no, email=no"/>
    <title>问卷填写</title>

    <script src="jquery-1.10.2.js" type="text/javascript"></script>

    <link rel="stylesheet" href="Plugins/vant/index.css?v=2">
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="Plugins/vant/vue.min.js"></script>
    <script src="Plugins/vant/vant.min.js"></script>

</head>
<body style="background-color: #ffffff">
<div id='app'>
    <auto-datalist :key="mykey" v-model="list" :style="style" :myname="name" @myupdate="undate"></auto-datalist>
    <auto-datalist :key="mykey" v-model="list" :style="style" :myname="name" @myupdate="undate"></auto-datalist>
    <auto-datalist :key="mykey" v-model="list" :style="style" :myname="name" @myupdate="undate">这是组件子内容</auto-datalist>
</div>
<template id="datalisttemp">
    <div>
        <div v-for="(item,index) in list" :key="item.key" :style="style">
            <input v-model="item.num"/>
            <button @click="delClick($event,item.key)">删除</button>
        </div>
        <button @click="addClick">添加</button>
        <slot></slot>
    </div>
</template>
<script>
    Vue.component('auto-datalist', {
        model: {
            prop: 'datasource',
            event: 'update'
        },
        template: '#datalisttemp',
        props: {  // 超级变态的一点，变量名必须全部用小写，有一个大写就不行，麻痹的，傻逼规定
            datasource: Array,
            style: String,
            myname: String
        },
        data: function () {
            return {
                list: this.datasource
            }
        },
        methods: {
            addClick: function () {
                console.log(this.myname);
                this.list.push({key: (this.list.length + 1).toString(), num: this.list.length + 1});
                this.$emit('update', this.list);
                this.$emit('myupdate');
            },
            delClick: function (ev, val) {
                let oldlist = this.list;
                let newlist = [];
                if (oldlist != null && oldlist != undefined && oldlist.length > 0) {
                    for (let i = 0; i < oldlist.length; i++) {
                        if (val != oldlist[i].key) {
                            newlist.push(oldlist[i]);
                        }
                    }
                }
                this.list = newlist;
                this.$emit('update', this.list);
                this.$emit('myupdate');
            }
        }
    });

    var app = new Vue({
        el: '#app',
        data: {
            list: [{key: "1", num: 1}, {key: "2", num: 2}, {key: "3", num: 3}, {key: "4", num: 4}],
            name: "张三",
            mykey: 1,
            style: ""
        },
        methods: {
            undate: function (ev, val) {
                this.mykey = this.mykey + 1;
            }
        }
    })
</script>


</body>
</html>

王翼鹏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE自定义组件

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"/> <meta name="screen-orientation" content="portrait"/> <meta name="full-screen" content="yes"/> <meta .
复制链接

扫一扫