前言
在vue官网中有这么一句话:一个理想的 Vue 应用是 prop 向下传递,事件向上传递的。
在vue中,父子组件的传值正是符合这句话,父组件通过prop向子组件传值,而子组件则通过事件向父组件传值。
父子组件传值
父组件向子组件传值可以通过以下三步**
1、在父组件中定义数据
比如我就把vm实例当做父组件,然后在 data 中定义一个数据
var vm = new Vue({
el: '#app',
data: {
msg: "父组件中想传给子组件的数据"
}
});
2、父组件在引用子组件的时候,通过 属性绑定(v-bind:) 的形式绑定属性,把数据传给子组件
在vm实例中注册子组件之后,就可以在vm实例中引用子组件了,比如我在vm实例中注册了一个 login
子组件,然后在引用子组件的时候,把数据传给子组件。
<div id="app">
<login v-bind:parentmsg="msg"></login>
</div>
在这里,我们通过属性绑定的形式,把父组件中的 msg
变量,绑定在了子组件 login
的 parentmsg
属性上了,这样我们就可以在 子组件 中通过 parentmsg
&