03、vue 页面跳转传值，父子组件传值

1、页面跳转传参

//使用path跳转 只能用query 传参  ，用params传参参数传不过去 
优点是不会显示在url上面
缺点是 一刷新页面参数就没有l
this.$router.push({path: '/addPrice',query:{ id:'1'}});
//使用name跳转 ，用query和params跳转都行

// 但是query跳转的页面参数会显示在url上面，但是params却不会
优点和上面的刚好相反
this.$router.push({name: 'AddPrice',params:{ id:'1'}});

2、父子组件传值
父组件

<div>
    <Headers name="首页" right="新建" @rightBtn="sayHello"></Headers>
</div>
<script >
methods: {
  sayHello() {
      console.log('父组件‘)
    }
}
</script>

子组件(子组件调用父组件的方法)

<template>
  <mt-header fixed :title="name">
    <router-link to="/" slot="left">
      <mt-button icon="back"></mt-button>
    </router-link>
    <mt-button  slot="right" @click.native="childClick">{{right}}</mt-button>
  </mt-header>
</template>

<script>
    import { Header } from 'mint-ui';
    export default {
        name: "Headers",
        props: ['name','right'],
        components:{
          Header,
        },
        methods:{
          childClick(){
            this.$emit('rightBtn')
          }
        }
    }
</script>

<style scoped>

</style>

3、父组件调用子组件的方法

//父组件
<Strategy ref='strategyChild' :consitionList="consitionList"/>
<button @click="clickParent">点击</button>

methods:{
  clickParent() {
        this.$refs.strategyChild.childClick("嘿嘿嘿");
      }
}
//子组件
 methods:{
      childClick(e) {
          console.log(e)
      }
  }

4、修改浏览器的title
//修改浏览器的头部

Vue.directive('title', {
  inserted: function(el, binding) {
    document.title = binding.value
  }
})
或者
document.title='首页'