vue2.0 组件之间传值

父组件给子组件传值

  1. 在父组件中引入子组件

      vue2.0 组件之间传值_第1张图片

      vue2.0 组件之间传值_第2张图片

 

      2.       给要传递的值绑定一个变量

      vue2.0 组件之间传值_第3张图片

 

      3.        在子组件中使用props接受传递过来的值

      子组件:

       vue2.0 组件之间传值_第4张图片

      这样,在子组件中使用'child'就能使用父组件中msg的值了。

 

子组件给父组件传值

  1.        在子组件中定义一个传值的方法

      vue2.0 组件之间传值_第5张图片

      使用emit方法

      vue2.0 组件之间传值_第6张图片

 

      2.     父组件中

      定义一个方法监听子组件的数据变化

      vue2.0 组件之间传值_第7张图片

      fromchild方法的参数就是子组件中childMsg的值

 

非父子组件之间传值

方法一:定义公共的实例文件bus.js

      1. bus.js

       

       2.组件一,传值

       vue2.0 组件之间传值_第8张图片

       3. 组件二,接受组件一传来的值

       vue2.0 组件之间传值_第9张图片

 

方法:在main.js建一个空的Vue实例

       1. main.js   

        Vue.prototype.exchange = new Vue();

       2组件一传递参数

   this.exchange .$emit('msg',this.myCount)

        3.在组件二中接收参数

          this.exchange .$on('msg', (myCount) => {})

你可能感兴趣的:(前端)