vue传值父子问题案例解决

Bertha 。 2022-03-18 16:50 174阅读 0赞

<!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>

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 父子组件传值

父子组件传值最常用的方法（4种） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

比眉伴天荒/ 2023年01月16日 02:43/ 0 赞/ 284 阅读

相关 Vue - 组件传值（父子组件间传值、非父子组件间传值）

推荐：[Vue汇总][Vue] Vue - 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue

我就是我/ 2022年12月21日 11:00/ 0 赞/ 273 阅读

相关 vue父子组件传值

作者：小小字符链接：https://www.jianshu.com/p/4f2c0acedb04 來源：简书 1.前言组件是Vue.js最推

悠悠/ 2022年05月27日 10:50/ 0 赞/ 271 阅读

相关 Vue父子传值与非父子传值

父传子：主要是通过子组件使用 props() 方法来接收父组件传递过来的值 Vue.component('father',{

浅浅的花香味﹌/ 2022年05月14日 04:25/ 0 赞/ 260 阅读

相关 Vue 父子传值

参考一：父组件向子组件传值： parent： <parent> <child :message="msg"></child> </parent>

Myth丶恋晨/ 2022年04月25日 02:18/ 0 赞/ 240 阅读

相关 vue传值父子问题案例解决

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Bertha 。/ 2022年03月18日 16:50/ 0 赞/ 175 阅读

相关 Vue父子组件传值

Vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot 通过props来传值：静态传值就是直接通过props来传递动态传值是通

Dear 丶/ 2022年01月22日 15:15/ 0 赞/ 347 阅读

相关 Vue父子传值神坑（已解决）

按照教程走，应该没有问题父组件在引用的子组件中使用`<子组件名称 :xxx="xxx"></子组件名称>` 子组件在脚本里写入`props:["xxx"]`,坑就在这

冷不防/ 2021年11月27日 05:30/ 0 赞/ 202 阅读

相关 vue父子组件传值

父组件 <template> <div> <h1>我是父组件</h1> <hello :msg="ad

小咪咪/ 2021年09月17日 02:04/ 0 赞/ 495 阅读

相关 vue父子页面传值

1.props 传值 //父组件传递参数到自组件 <template> <div> <my-vue :name="na

小鱼儿/ 2021年08月26日 20:19/ 0 赞/ 454 阅读