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

最新推荐文章于 2024-07-03 08:30:29 发布

原创最新推荐文章于 2024-07-03 08:30:29 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Vue 专栏收录该内容

661 篇文章

订阅专栏

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

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