• 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>
  • 相关阅读:
    hexo命令报错
    开始使用hexo
    javascript 获取元素
    javascript DOM属性操作
    javascript DOM节点操作
    javascript 完美拖动效果
    ubuantu 18.04 LTS 版本解决网易云安装启动问题
    课后作业-阅读任务-阅读提问-3
    C# 并行循环
    C# 委托
  • 原文地址:https://www.cnblogs.com/pengc/p/8987036.html
Copyright © 2020-2023  润新知