Vue ---父子组件之间互相传值与方法调用

最新推荐文章于 2025-06-17 10:37:35 发布

原创最新推荐文章于 2025-06-17 10:37:35 发布 · 630 阅读

0 ·

CC 4.0 BY-SA版权

前端学习专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一个简单的Vue.js应用实例，展示了如何实现父子组件之间的数据传递。通过具体代码示例，讲解了子组件如何向父组件发送消息以及父组件如何接收这些消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>组件的开发</title>
    <script src="../../lib/vue.min.js"> </script>
    <link href="../../lib/bootstrap.min.css" rel="stylesheet">
    

   
 </head>
 <body>
     <!--父子组件之间传递内容，-->
    <div id="app">
        <com1 v-bind:temp="msg" @fun="getMsg"></com1>
    </div>
    <template id="temp1">
        <div>
            <h1>一个元素，组件--{{temp}}</h1>
            <input type="button" value="子组件想父组件传递内容" @click="sendMsg">
        </div>
    </template>

    <script>
        var com1 = {
            template : '#temp1',
            data (){
                return {
                    sonmsg : '做一个孝顺的孩子，给爸爸200.'
                };
            },
            props :[
                'temp'   ///子组件调用父组件的相关内容
            ],
            methods :{
                sendMsg(){
                    this.$emit('fun',this.sonmsg);
                }
            }

        }

        var vm = new Vue({
            el : '#app',
            data : {
              msg : '这个是父组件的数据，爸爸有100块.你想要吗？？',
              msgformson : ''
            },
            methods : {
              getMsg(data){
                  this.msgformson = data;
                  console.log(this.msgformson);
              }
            },
            components :{
                com1
            }
            


        });
    
    
    </script>

    </body>
    </html>