Vue——父子组件的通信

最新推荐文章于 2022-10-03 19:11:49 发布

33的史努比

最新推荐文章于 2022-10-03 19:11:49 发布

阅读量197

点赞数

分类专栏：前端入门学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/coising/article/details/123169661

版权

前端入门学习专栏收录该内容

88 篇文章 0 订阅

订阅专栏

父组件向子组件传递数据

props 数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    
    
    <div id="app">
        <!-- 没有v-bind会把 movies当字符串传递到下一层 -->
        <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
    </div>

    <template id="cpn">
        <div>
            {{cmovies}}
            <h2>{{cmessage}}</h2>
        </div>
    </template>

    <script src="./vue.js"></script>
    <script>
        // 父传子 props
        const cpn = {
            template :'#cpn',
            props: ['cmovies','cmessage']
        }
        const app = new Vue({
            el: '#app',
            data : {
                message : 'fff',
                movies : ['dd','eee','aa']
            },
            components: {
                cpn
            }
            
        })


    </script>
</body>
</html>

类型限制 提供默认值

 props: {
                // // 1. 类型限制
                // cmovies : Array,
                // cmessage : String

                // 2. 提供一种默认值 不传的时候显示
                cmessage :{
                    type : String,
                    default : 'aaaa'
                }
            }

提供一种默认值不传的时候显示

<cpn v-bind:cmovies="movies"></cpn>

类型是对象或者数组时，默认值必须是一个函数

33的史努比

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue——父子组件的通信

父组件向子组件传递数据props 数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫