组件传值：父组件与子组件传值用props

Nancy-sn

已于 2022-06-18 11:42:53 修改

阅读量377

点赞数

分类专栏： js 文章标签： vue.js elementui javascript

于 2022-06-18 10:45:21 首次发布

本文链接：https://blog.csdn.net/mariodf/article/details/125343749

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文演示了Vue.js中父组件向子组件传递数据的过程。首先定义父组件，设置`parent_Msg`属性，然后创建子组件，通过`props`接收来自父组件的`childmsg`。最终展示了一个简单的例子，父组件将`parent_Msg`的值传递给子组件，子组件在模板中显示该值。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <div id="app">

        <child :childmsg = "parent_Msg" ></child>
    </div>

</body>
</html>
<script src="./js/vue.js"></script>
<script>
    Vue.component("child",{
        props:["childmsg"],
        template:`
            <div>
                <p>{{childmsg}}</p>
            </div>
            `
    })


new Vue({
    el: "#app",
    data: {
        parent_Msg:"父组件的数据"
    }
})
</script>