vue传值父子问题案例解决

<!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传值父子问题案例解决

猜你喜欢