Vue快速学习笔记(4)Vue组件中的数据传递

Vue组件中的数据传递

父组件向子组件传递数据:

• 使用props属性来定义子组件的数据。
• 使用v-bind指令在组件中可以使父组件的数据传递到子组件中。

示例代码

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://suiyan.cc/assets/plugins/vue.js"></script>
<template id="mh">
    <h1> {{finfo}}</h1>
</template>

<div id="app">
    <mh finfo="子组件的数据"></mh>
    <mh :finfo="msg"></mh>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"这是父组件Vue实例中传来的消息。"
        },
        components:{
            mh:{
                template:"#mh",
                props:['finfo']
            }
        }
    });
</script>

子组件向父组件传值