vue传参父到子，子到父，跳转等

页面传参：

父到子：props传参，写在子组件上:title="title"

// 父级页面
<template>
  <div>
    <DefaultPage :title="title"></DefaultPage>
  </div>
</template>
<script>

import DefaultPage from './DefaultPage'

export default {
  name: 'Demo',
  components: { DefaultPage },
  data () {
    return {
      title: "加载失败，请稍后重试~",
    };
  },
};
</script>
<style lang="scss" type="text/scss">
</style>

子页面：

<template>
  <div>
    <p class="title">{{ title }}</p>
    <slot></slot>
  </div>
</template>
<script>

export default {
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data () {
    return {}
  },
}
</script>

<style scoped>
.title {
  font-size: 15px;
}
</style>

=========================================================================

子到父：this.$emit

<!--父级页面 -->
<template>
  <div>
    <Card-price @getWallet="getWallet"></Card-price>
  </div>
</template>
<script>

import CardPrice from './CardPrice'

export default {
  name: 'Demo',
  components: { CardPrice },
  data () {
    return {
      isGetWallet: false,
    };
  },
  methods: {
    getWallet (params) {
      console.log(params, '子组件传的参数')
      this.isGetWallet = params.isGetWallet
    },
  }
};
</script>
<style lang="scss" type="text/scss">
</style>

子页面：

<!--子级页面 -->
<template>
  <div>子组件</div>
</template>

<script>

export default {
  name: "Card",
  data () {
    return {
    }
  },
  mounted () {
    this.$emit('getWallet', { isGetWallet: true })
  },
}
</script>
<style lang="scss" scoped>
</style>

=========================================================================

跳转传参和取参

跳转方式：
1、push (会添加新的页面)
传参query
this.$router.push({ name: "优惠券详情", query: { ticketId: 1 } })

取参：ticketId: this.$route.query.ticketId ? this.$route.query.ticketId : 0,

2、replace （会覆盖页面）

this.$router.replace({ path: '/demo?id=1', query: {isShow: true } })

取参：取参：isShow: this.$route.query.isShow ? this.$route.query.isShow : false,

取链接上带的参数 ：https://www.baidu.com/s?ie=UTF-8
 

取链接上的参数ie的值 ：https://www.baidu.com/s?ie=UTF-8

function getQueryString (name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}
getQueryString('ie')

// "UTF-8"