子组件通过调用父组件传递方法，向父组件传递数据

最新推荐文章于 2024-04-06 12:08:38 发布

何迟

最新推荐文章于 2024-04-06 12:08:38 发布

阅读量987

点赞数

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82890561

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

注意：

子组件向父组件传递数值，通过v-on绑定方法。通过父组件的方法接收的数据接口，供子组件改变，然后通this.datamagFromSon方法改变改变父组件的值，变相传递数据。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
    <com1 @showcool="show"></com1>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
          datamagFromSon:null
          //默认不从子元素获取数据    
        },
        methods:{
            show(data){
                //console.log('成功调用了父组件的方法 +++++'+ data)
                console.log(data);
                this.datamagFromSon = data;
                //将子组件的对象的值，通过此方法被调用后传递给了父组件    
            }
        },
        components:{
            com1:{
                template:'<input type="button" value="点击调用父组件的方法" @click="myclick">',
                props:['extendmsg'],
                //props:道具 只有绑定过后并在其中定义过，子组件才能使用父组件的某些属性   
                //这里的数据，只可读不可写
                data(){
                  return{
                      el1:{name:'陈小帅',qq:3199578835}
                  }  
                },
                methods: {
                    myclick(){
                        this.$emit('showcool',this.el1)
                        //emit:触发，调用 通过这个完成template对于data的作用    
                    }
                }
            }
        }
    });
</script>
</body>
</html>

效果;

何迟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
子组件通过调用父组件传递方法，向父组件传递数据

注意：子组件向父组件传递数值，通过v-on绑定方法。通过父组件的方法接收的数据接口，供子组件改变，然后通this.datamagFromSon方法改变改变父组件的值，变相传递数据。HTML代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
复制链接

扫一扫