vue传递参数

一、路由之间的传递

quation.vue

     <router-link class="li" :to="{path:'/newsDetail/'+items.id,query: {name: '资讯'}}" ></router-link>

newsDetail.vue

     mounted: function(){

             this.id = this.$route.params.id
             this.name = this.$route.query.name.substring(0, 2)

      }

二、父向子传值

father.vue

    <h1>我是父组件</h1>

    <son :message = {{msg}}

son.vue

   <h3>{{message}}</h3>

<script>

    export  defaule(){

         props:[ 'message' ]

     }

</script>

 

三、单页面子向父组件传值

首先在main.js里新加bus作为一个公共的实例

main.js

  export   var bus = new vue()

son.vue

   methods:{

        bus.$emit('state',this.state)  //发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置；

   }

dad.vue

  methods:{

     bus.$on('state',(val){   //接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作

        console.log(val)

     })

  }

  

这里需要强调的一点是：on和emit事件必须是在一个公共的实例上才能触发。

子组件说：父组件你挺好了，我用$eimt把数据传给你啊，你记得看看有没有拿到啊。

父组件说：好的，不怕，我有$on这个东东，我可以随时监听到你传了啥，你传给我什么，我就变成什么呗，没办法，你传给我的，我是要跟随你的。

旁白：但是你们两必须得在一个世界啊，别一个在二次元，一个在三次元，那样没法传啊。这样吧，你们都必须保证在同一个地方吧。

子组件：好，那我这边有一个bus，父组件那也有一个bus，那我们两都到那吧。

旁白：一定要记住你们可以使用一个空的 Vue 实例作为中央事件总线。毕竟性别不同怎么谈恋爱啊。