zoukankan      html  css  js  c++  java
  • 父组件传递数据给子组件props【数组形式】

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    
    <body>
        <template id='cpn'>
            <div>
                <h4 v-html="cmessage"></h4>
                <ul>
                    <li v-for="item in cmovies">
                        {{item}}
                    </li>
                </ul>
            </div>
        </template>
        <div id='app'>
            //分别绑定用哪个变量去接收哪个变量的值
            <cpn :cmovies='movies' :cmessage='message' ></cpn>
        </div>
        <script>
            //子组件
            const cpn = {
                //外部模板
                template: '#cpn',
                //声明用这些变量去接收父组件的传值
                props: ['cmovies', 'cmessage'],
                data() {
                    return {
    
                    }
                }
            }
            const vm = new Vue({
                el: '#app',
                data: {
                    message: '来看电影啊!<br/>这里是我从父组件拿来的电影数据!',
                    movies: ['哪吒', '千与千寻', '哆啦A梦', '蜘蛛侠']
                },
                //注册子组件
                components: {
                    cpn
                }
            })
        </script>
    </body>
    
    </html>
  • 相关阅读:
    课后作业
    大道至简第六章读后感
    Ljava.lang.Object;@ba8a1dc
    课后作业
    大道至简第五章读后感
    课后作业加密
    动手动脑
    大道至简第四章读后感
    NEU 解题报告索引
    Aizu 解题报告索引
  • 原文地址:https://www.cnblogs.com/carry-2017/p/11287959.html
Copyright © 2011-2022 走看看