Vue：组件数据交互中的props的命名规则

75 阅读 0 评论 50 点赞

我是靠谱客的博主秀丽枫叶，最近开发中收集的这篇文章主要介绍Vue：组件数据交互中的props的命名规则，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{pmsg}}</div>
        <menu-item :menu-title="ptitle"></menu-item>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript">
        //    父组件向子组件传值-props属性名规则
        Vue.component('third-com', {
            props: ['testTile'],
            template: '<div>{{testTile}}</div>'
        });
        Vue.component('menu-item', {
            props: ['menuTitle'],
            template: '<div>{{menuTitle}}<third-com testTile="hello"></third-com></div>' //字符串中可以用驼峰规则
        });
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                ptitle: '动态绑定属性'
            }
        });
    </script>
</body>

</html>