zoukankan      html  css  js  c++  java
  • 父子组件信息传递

    子组件访问父组件的数据

    a)在调用子组件时,绑定想要获取的父组件中的数据
    b)在子组件内部,使用props选项声明获取的数据,即接收来自父组件的数据
    总结:父组件通过props向下传递数据给子组件
    注:组件中的数据共有三种形式:data、props、computed
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
    
    </head>
    
    <body>
    <div id="app">
        <my-hello></my-hello>
    
    </div>
     <template id="hello">
         <div>
             <h3>我是父组件 </h3>
             <h2>msg: {{msg}}</h2>
             <hr>
              <my-world :message="msg"></my-world>
         </div>
     </template>
    
    <template id="world">
        <div>
            <h3>我是子组件</h3>
            <h3>父组件的信息:{{message}}</h3>
    
        </div>
    </template>
    </body>
    
    <script>
    new Vue({
        el: "#app",
        components: {
            'my-hello':{
                data: function () {
                    return {
                        msg: '这是父组件的信息'
                    }
                },
                template: "#hello",
                components:{
                    'my-world':{
                        template:"#world",
                        props: ['message'],
                        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:'秋香'};
    									}
                    },
    
                }
            }
        }
    })
    </script>
    </html>
    
  • 相关阅读:
    以CCF CSP认证为抓手,积极探索软件基础能力递进式培养体系
    HDU1878 欧拉回路
    HDU1878 欧拉回路
    Java---casting(对象转型)
    Java---package和import语句
    Java---方法的重写
    Java---继承中的构造方法
    Java---内存分析
    Java---多个类写在一个类文件中
    Java---SSH框架认识
  • 原文地址:https://www.cnblogs.com/wspblog/p/9984394.html
Copyright © 2011-2022 走看看