vue-cli中父子组件间的变量传递

vue-cli中父子组件间的变量传递

在vue中每一个组件的作用域都是独立的，如果我们想实现父子组件间变量的传递就要另寻他法，而不能直接调用其中的变量。

父级组件向子级组件传递变量

要实现这种效果我们就要在子级组件对象属性中添加props，话不多说，上代码：

• 父级组件代码： 
  

  1. :msg为简写 v-bind:msg， 这里的msg为子组件的变量； 
  2. inputs为父组件中的变量 。

• 子级组件代码： 
  

  1. 这里的msg就是从父组件传过来的 
  2. msg的定义不是在data中而是在props中

以下为效果图

子级组件向父级组件传递变量

子级组件向父级组件传递变量的方法相对来说会多一点，我们这里主要用的是$emit（懵逼的朋友走这边 ），上代码：

• 子级组件代码： 
  

  1. 这里是自己起的名字； 
  2. 这里填写要传的值；

• 父级组件代码： 
  
  1. 在组件中声明，onSay为自己起的方法名字（@say=v-on:say）； 
  2. 在methods中去声明你的方法，其中参数 ev就是传过来的参数 。

最后，有什么不足之处请大家多多指出，如果感觉对你有帮助就 顶 我一下吧