使用-Prop-传递数据(父组件通过 props 向下传递数据给子组件)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用-Prop-传递数据(父组件通过 props 向下传递数据给子组件)相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用-Prop-传递数据</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!--传入值到子模板的props-->
    <child my-message="hello!"></child>

    <!--绑定父组件的数据到子模板的props-->
    <child2 v-bind:cm="parentMsg"></child2>
</div>
<script>
    Vue.component(child, {
        props    : [myMessage],
        template : <span>{{ myMessage }}</span>
    })


    Vue.component(child2, {
        props    : [cm],
        template : <span>{{ cm }}</span>
    })

    new Vue({
        el         : #app,
        data : {
            parentMsg : parentMsg
        }        
    })

</script>
</body>
</html>

 

以上是关于使用-Prop-传递数据(父组件通过 props 向下传递数据给子组件)的主要内容,如果未能解决你的问题,请参考以下文章

组件:使用Prop下发数据

vue中的prop

vue小技能:通过插槽`<slot>`分发内容,使用插槽 prop向父级组件传递数据。

vue-自定义组件传

vue-自定义组件传

vue-自定义组件传