vue 父子组件相互传递数据

例子一

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    
    <script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
    <div id="app">
         {{message}}

         <son-component v-for="post in posts"  :title="post.title" :key="post.id" @e-world="getData"></son-component>

    </div>
      

       
    
    <script >
       Vue.component('son-component',{
             data:function(){
             return{
                 sondata:"子数据"
             }
             },
             methods:{
            send(){
                // console.log(this);  //此处的this表示当前子组件实例
                this.$emit('e-world',this.sondata); //使用$emit()触发一个事件，发送数据
            }
          } ,
          props:['title'],
          template:'<div>  <h4>子组件接收父组件的数据是：{{title}}</h4> <button @click="send">将子组件的数据向上传递给父组件</button> <input v-model="sondata"></input> </div>'
      })    

      new Vue({
          el:'#app',
          data:{
              message:1,
              posts:[
                 {id:1,title:'标题一'},
                 {id:2,title:'标题二'},
                 {id:2,title:'标题三'}
              ],
              postFontSize:1
          },
          methods:{
            getData(mes){
                this.message=mes;
            }
        }
          

      })
    </script>
</body>
</html>

例子二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件及组件间数据传递</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>
    </div>
    
    <template id="hello">
        <div>
            <h3>我是hello父组件</h3>
            <h3>访问自己的数据：{{msg}},{{name}},{{age}},{{user.username}}</h3>
            <h3>访问子组件的数据：{{sex}},{{height}}</h3>
            <hr>

            <my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>
        </div>
    </template>

    <template id="world">
        <div>
            <h4>我是world子组件</h4>
            <h4>访问父组件中的数据：{{message}},{{name}},{{age}},{{user.username}}</h4>
            <h4>访问自己的数据：{{sex}},{{height}}</h4>
            <button @click="send">将子组件的数据向上传递给父组件</button>
        </div>
    </template>

    <script>
        var vm=new Vue({ //根组件
            el:'#itany',
            components:{
                'my-hello':{  //父组件
                    methods:{
                        getData(sex,height){
                            this.sex=sex;
                            this.height=height;
                        }
                    },
                    data(){
                        return {
                            msg:'网博',
                            name:'tom',
                            age:23,
                            user:{id:9527,username:'唐伯虎'},
                            sex:'',
                            height:''
                        }
                    },
                    template:'#hello',
                    components:{
                        'my-world':{ //子组件
                            data(){
                                return {
                                    sex:'male',
                                    height:180.5
                                }
                            },
                            template:'#world',
                            // props:['message','name','age','user'] //简单的字符串数组
                            props:{ //也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
                                message:String,
                                name:{
                                    type:String,
                                    required:true
                                },
                                age:{
                                    type:Number,
                                    default:18,
                                    validator:function(value){
                                        return value>=0;
                                    }
                                },
                                user:{
                                    type:Object,
                                    default:function(){ //对象或数组的默认值必须使用函数的形式来返回
                                        return {id:3306,username:'秋香'};
                                    }
                                }
                            },
                            methods:{
                                send(){
                                    // console.log(this);  //此处的this表示当前子组件实例
                                    this.$emit('e-world',this.sex,this.height); //使用$emit()触发一个事件，发送数据
                                }
                            }
                        }
                    }
                }
            }
        });    
    </script>
</body>
</html>

vue 父子组件相互传递数据

猜你喜欢