父子组件信息传递

最新推荐文章于 2024-07-12 09:36:48 发布

weixin_30550271

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量56

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wspblog/p/9984394.html

版权

子组件访问父组件的数据

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>

转载于:https://www.cnblogs.com/wspblog/p/9984394.html

weixin_30550271

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父子组件信息传递

子组件访问父组件的数据a)在调用子组件时，绑定想要获取的父组件中的数据b)在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据总结：父组件通过props向下传递数据给子组件注：组件中的数据共有三种形式：data、props、computed<!DOCTYPE html><html lang="en"><head> <...
复制链接

扫一扫