VUE父子间通信-父传子-props

最新推荐文章于 2023-01-10 17:23:57 发布

TomKing9

最新推荐文章于 2023-01-10 17:23:57 发布

阅读量201

点赞数

分类专栏： VUE学习

本文链接：https://blog.csdn.net/TomKing9/article/details/115387610

版权

Vue.js 组件模板 props 数据传递

关键词由CSDN通过智能技术生成

VUE学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>
    <script src="./vue/vue.js"></script>
</head>
<body>
    <script src="./vue/vue.js"></script>
    <!-- <template id='tp'>`<div>你好 李焕英</div>`</template> -->   <!-- 这一段不是js代码 -->
    <div id="app">  <!-- 属性名是传递给子组件的，属性值是从父组件传递过来的 -->
        <cpn :tv='tvs'></cpn>
    </div>
    <script>
       /*  const cpn=Vue.extend({
            template: `<div>你好 李焕英</div>`
        }); */
        // 创建组件cpn
         const cpn={
                template:`<div>{{tv}}</div>`,
                props:{
                    tv:String,
                }
        }
        //使用组件
        /* Vue.component(
            'xcpn',{
                template:'#tp'}       //cpn不是字符串
        ); */
    </script>
    <script>
        let p=new Vue({
            el: '#app',
            data:{
                tvs:'please answer 1998'
            },
            components:{
                cpn         //cpn:cpn
            }

        });
    </script>
</body>
</html>