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

虾米大王

于 2023-04-29 19:13:10 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/modern358/article/details/129968657

Vue 专栏收录该内容

661 篇文章

订阅专栏

该文章演示了如何在Vue.js中使用动态props向子组件传递数据。通过创建一个名为child的组件，接收message和name两个props，并在父组件中定义这些数据，实现了从父组件到子组件的信息传递。用户可以在输入框中修改信息，实时更新子组件显示的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>