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

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

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

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

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

  • 父级组件代码: 
    vue-cli中父子组件间的变量传递

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

  • 子级组件代码: 
    vue-cli中父子组件间的变量传递

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

以下为效果图

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

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

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

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

  • 子级组件代码: 
    vue-cli中父子组件间的变量传递

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

  • 父级组件代码: 
    vue-cli中父子组件间的变量传递
    1. 在组件中声明,onSay为自己起的方法名字(@say=v-on:say); 
    2. 在methods中去声明你的方法,其中参数 ev就是传过来的参数 。

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

上一篇:vue--三种组件中之间的传值


下一篇:linux cp 复制文件夹