vue传值父子问题案例解决

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head&amp

巴啦啦小能量

4350人浏览 · 2019-02-21 15:35:37

巴啦啦小能量 · 2019-02-21 15:35:37 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <one></one>
    </div>
</body>
</html>

//引入vue
<script src="node_modules/vue/dist/vue.js"></script>

<script>
    (function(){
        //two 的子模板
        let three = {
            props : ["data" , "ide"],
            methods: {
                del(i){
                    this.$emit("del",i)
                }
            },
            template : `<div><h1>{{data}}</h1><h2>{{ide}}</h2> <span @click="del(ide)">X</span></div>`

        };
        //one 的子模板
        let two = {
            props : ["data" , "ide"],
            components : {
                three
            },
            methods:{
                dede (i){
                    this.$emit("del",i)
                }
            },
            template : `<div>
                            <three @del = "dede" :data = "data.title" :ide = "ide"></three>
                        </div>`
        };
        //父模板
        let one = {
            data(){
                return {
                    newsData:[
                        {title:"新闻一"},
                        {title:"新闻一"},
                        {title:"新闻一"},
                        {title:"新闻一"}
                    ]

                }
            },
            components : {
                two
            },
            methods:{
                delete2(i){
                    this.newsData.splice(i,1);
                }
            },
            template : `<div><h1>one1</h1><two @del = "delete2" :data = "n" ind = "index" v-for="(n,index) in newsData"></two></div>`
        };


        let vm = new Vue({
            el : "#app",
            components : {
                one
            }

        })

    })()
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^