vue-例5-9动态props向子组件动态传递数据.html

最新推荐文章于 2024-06-14 10:55:44 发布

虾米大王

最新推荐文章于 2024-06-14 10:55:44 发布

阅读量133

点赞数

分类专栏： Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/modern358/article/details/129968657

版权

Vue 专栏收录该内容

661 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态props向子组件动态传递数据</title>
</head>
<body>
    <h2>动态props向子组件传递数据</h2>
    <div id="app">
        输入信息: <input type="text" v-model="msg">
        <child v-bind:message="msg" v-bind:name="person" ref="child1"></child>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        Vue.component('child',{
            props:['message','name'],
            template:'<span>{{message}}发送者：{{name}}</span>'
        });

        let vm = new Vue({
            el:'#app',
            data:{
                msg:'hello',
                person:'学习课堂'
            }
        });
    </script>
</body>
</html>