vue 组件：父组件向子组件传值，以及子组件向父组件传值

最新推荐文章于 2025-06-10 09:57:51 发布

原创最新推荐文章于 2025-06-10 09:57:51 发布 · 523 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

6 篇文章

订阅专栏

1.父组件向子组件传值

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
       
    </head>
    <body>
        <div id="app">
            <!-- 父组件，可以在引用子组件的时候，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，一属性绑定 的形式，传递到子组件内部，以供子组件使用 -->
          <my-info v-bind:parentmsg="msg"></my-info>
        </div>
    
        <template id="test">
            <h2  >{{parentmsg}} ----{{name}}</h2>
        </template>

    </body>
    <script>
        var myInfo = {
            template:'#test',
            data(){
                // 子组件的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如组组件通过Ajax请求回来的数据，而后放在了data上，以供使用，data上的数据可读可写
                return { name:"123"}
            },
            // props 官方建议 只读，无法重新赋值！
            // 从父组件传递过来的parentmsg属性，需要在props定义后，才可以在子组件中使用
            props:['parentmsg']

        };
      let vm = new Vue({
            el:'#app',
            data:{
                msg:'test msg'
            },
            components:{
                //表示的意思 myInfo:myInfo 支持驼峰命名方法 使用时   <my-info></my-info>，也可以用全部小写将不生效驼峰命名
                myInfo
            }
        })
    </script>
</html>

2.子组件向父组件传值

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
       
    </head>
    <body>
        <div id="app">
            <!-- 父组件，可以在引用子组件的时候，通过属性绑定（v-on：）的形式，把需要传递给子组件的方法，一属性绑定 的形式，传递到子组件内部，以供子组件使用 -->
          <my-info v-on:test-func="alertInfo"></my-info>
        </div>
    
        <template id="test">
            <div>
              <h2 >{{testmsg}}</h2>
              <input type="button" value="点击调用" v-on:click="useParentFunc" />  
            </div>
        </template>

    </body>
    <script>
        var myInfo = {
            template:'#test',
            data(){
                 return{
                    testmsg:"testmsg !!!"
                 }  
            },
            methods:{
                useParentFunc:function(){
                    //$emit 调用说明 第一个参数 组件定义上定义的v-on:testFunc 的名称，第二个参数以及后面的参数都事回传的data
                    this.$emit('test-func',this.testmsg)
                }
            }

        };
      let vm = new Vue({
            el:'#app',
            data:{
                msg:'test msg'
            },
            methods:{
                alertInfo:function(data){
                    alert('调用了父类的方法，并回传了:'+data)
                }
            },
            components:{
                //表示的意思 myInfo:myInfo 支持驼峰命名方法 使用时   <my-info></my-info>，也可以用全部小写将不生效驼峰命名
                myInfo
            }
        })     
    </script>
</html>