vue2.0传值问题

一．建立vue-cli脚手架

  指令 npm install webpack -g

       npm install vue-cli -g

       vue init webpack vuetex1

       npm install

       npm run dev

      npm run build 打包项目

二．路由跳转页面传参

 routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      // <router-link :to="{ name: 'He2', params: { user:text }}">User</router-link>
      path: '/Hello1',
      name: 'Hello1',
      component: Hello1
    },
    {
      //<router-link :to="{name:'He3',params:{ tex:he3}}">我要向He3页面传值</router-link>
      // Hello1页面传过来的user参数，
      //在He2页面里用{{ $route.params.user }}接收参数
      path: '/He2/:user',
      name: 'He2',
      component: He2
    },
    {
      // 在He3页面里用{{ $route.params.user }}接收参数
      // He2页面传过来的tex参数，
      //在He3页面里用{{ $route.params.tex }}接收参数
      path: '/He3/:tex',
      name: 'He3',
      component: He3
    },
    {
      //在其他页面 <router-link to="/params/198/jspang ">URL 传参</router-link> 
      //用<p>新闻ID：{{ $route.params.newsId}}</p>
      //< p > 新闻标题：{{ $route.params.newsTitle }}</p>接受参数
      path: '/params/:newsId/:newsTitle',
      name: 'params',
      component: Params,
      //路由钩子函数
      beforeEnter: (to, from, next) => {
        console.log('我进入了params模板');
        console.log(to);
        console.log(from);
        next();//路由的控制参数常用的有next(true)和next(false)
      }
    }
  ]

二.组件的应用

1.全局注册组件

    在main.js里添加以下内容

Vue.component("runoob", {
  template: "<div><h1>自定义组件!</h1><p>这是自定义全局组件</p></div>"
});
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

在任何页面应用就可以了，例如在App.vue页面里

<runoob></runoob>

自定义局部组件

   在要用得到的页面里注册局部组件，只供当前页面使用

export default {
  name: "hello1",
  data() {
    return {
      msg: "Hi, I am Zyt",
      text: "Hi, I am 页面传值"
    };
  },
  components: {
    panda: {
      template: '<div style="color:red;">Panda from {{ here }} </div>',
      props: ["here"]
    }
  }
};

2.组件之间的通信

   用props从父组件向子组件传值

//Parent.vue
<template>
  <div class="Parent">
     <Children01 :child01='msgP'></Children01>
  </div>
</template>

<script>
import Children01 from "@/components/Children01";
export default {
  name: "Parent",
  data() {
    return {
      msgP: "我是父组件的信息，向Children01组件传值"
    };
  },
  components: {
    Children01
  }
};
</script>
<style scoped>

</style>

//Children01.vue
<template>
  <div class="Children01">
    {{ msg }}
    <p>{{ child01 }}</p>
  </div>
</template>

<script>
export default {
  name: "Children01",
  props: ["child01"],
  data() {
    return {
      msg: "我是Children01组件"
    };
  }
};
</script>
<style scoped>
.Children01 {
   300px;
  border: 1px solid red;
}
</style>

用props从子组件向父组件传值   

//Parent.vue
<template>
  <div class="Parent">
     <Children01 @toParentClick="acceptChildMess"></Children01>
  </div>
</template>

<script>
import Children01 from "@/components/Children01";
export default {
  name: "Parent",
  data() {
    return {};
  },
  components: {
    Children01
  },
  methods: {
    acceptChildMess(propm) {
      console.log(propm);
      return propm;
    }
  }
};
</script>
<style scoped>

</style>

//children01.vue
<template>
  <div class="Children01">
    <!-- {{ msg }}
    <p>{{ child01 }}</p> -->
    <button @click="toParen">向父组件传值</button>
  </div>
</template>

<script>
export default {
  name: "Children01",
  props: ["child01"],
  data() {
    return {
      msg: "我是Children01组件"
    };
  },
  methods: {
    toParen() {
      this.$emit("toParentClick", "我是Children01组件，向父组件传值");
    }
  }
};
</script>
<style scoped>
.Children01 {
   300px;
  border: 1px solid red;
}
</style>

 用props兄弟组件间传值，主要思想是children01先向Parent传值，然后Parent再向Children02传值

//Parent.vue
<template>
  <div class="Parent">
     <Children01 @toParentClick="acceptChildMess"></Children01>
     <Children02 :child02='msgP2'></Children02>
  </div>
</template>

<script>
import Children01 from "@/components/Children01";
import Children02 from "@/components/Children02";
export default {
  name: "Parent",
  data() {
    return {
      msgP: "我是父组件的信息，向Children01组件传值",
      msgP2: ""
    };
  },
  components: {
    Children01,
    Children02
  },
  methods: {
    acceptChildMess(propm) {
      console.log(propm);
      this.msgP2 = propm;
    }
  }
};
</script>
<style scoped>
.Parent {
   300px;
  height: 180px;
  border: 1px solid yellow;
}
</style>

//Children01.vue
<template>
  <div class="Children01">
    {{ msg }}
    <p>{{ child01 }}</p>
    <button @click="toParen">点击向父组件传值,然后向Children02组件传值</button>
  </div>
</template>

<script>
export default {
  name: "Children01",
  props: ["child01"],
  data() {
    return {
      msg: "我是Children01组件"
    };
  },
  methods: {
    toParen() {
      this.$emit("toParentClick", "我是Children01组件，向父组件传值,然后向Children02组件传值");
    }
  }
};
</script>
<style scoped>
.Children01 {
   300px;
  border: 1px solid red;
}
</style>

//Children02.vue
<template>
  <div class="Children02">
    {{ msg }}
    <p>{{ child02 }}</p>
  </div>
</template>

<script>
export default {
  name: "Children02",
  props: ["child02"],
  data() {
    return {
      msg: "我是Children02组件"
    };
  }
};
</script>
<style scoped>
.Children02 {
  border: 1px solid blue;
}
</style>