VUE学习笔记（四）

十一、Vue组件间的参数传递

11.1 idea中安装Vue插件

在idea中下载vue插件

在idea中配置，让idea能够操作.vue文件

​

11.2 在项目中创建子组件

创建子组件Content组件

<template>
    <div>
      商品列表...
      {{MyTitle}}
      <button type="button" @click="btnfn('hello java')">点我</button>
    </div>
</template>

<script>
    export default {
        name: "Content.vue",
        props:{
          'MyTitle':{
            type:String,
            required:true,
            default:'XX'
          },
          'btnfn':{
            type:Function
          }
        }
    }
</script>

<style scoped>

</style>

11.3 注册子组件

在main.js中注册子组件

import Vue from 'vue'
import App from './App.vue'
//引入Content
import Content from './components/Content'

//全局注册组件
Vue.component('MyContent',Content);

new Vue({
  el: '#app',
  render: h => h(App)
})

11.4 在App.vue中使用组件并传递参数

<template>
  <div id="app">
        <MyContent :MyTitle="msg"  :btnfn="FCfn" ></MyContent>
  </div>
</template>

<script>
  import MHeader from './components/Header'
export default {
  name: 'app',
  data(){
    return {
      msg:'hello vue!!'
    }
  },
  components:{
    "MHeader":MHeader
  },
  methods:{
    FCfn:function(m){//hello java
      this.msg = m;
    }
  }

}
</script>
<style>

</style>

11.5 父传子

通过子组件的props部分，来指明可以接收的参数，父组件通过在标签中写明参数的键值对来传递参数。

​ props是表示一个组件的参数部分，那么props的写法有两种：

​ 1）props:[参数列表]

​ 比如： props:['MyProp1','MyProp2',...]

​ 2）props:{参数名1:{type:String,required:true,default:'XX'},参数名2:{...}}

11.6 子传父

子传父的过程十分复杂，下列图解中已经配上了详细的步骤。

十二、Vue-router 路由

12.1 安装路由模块

npm install vue-router -s

12.2 引入路由模块并使用

在main.js中引入路由模块并使用

import Vue from 'vue'
import App from './App'
import router from './router'  //引入路由模块

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, //使用路由模块
  components: { App },
  template: '<App/>'
})

12.3 路由初体验

12.3.1 创建App.vue

<template>
  <div id="app">
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><router-link to="/Home">首页</router-link></li>
      <li role="presentation"><router-link to="/Product">商品列表</router-link></li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

改变url，发现中的内容发生改变

• http://localhost:8080/#/ 显示home
• http://localhost:8080/#/user 显示user

向router实例中添加mode属性：

• 值"hash": url带# 适用于调试模式
• 值"history" url不带#

12.3.2 创建Home.vue

<template>
    <div>首页</div>
</template>

<script>
export default {
    name: "Home"
}
</script>

<style scoped>

</style>

12.3.3 创建Product.vue

<template>
    <div>商品列表 商品的id:{{id}}</div>
</template>

<script>
export default {
    name: "Product",
    data(){
      return{
        id:this.$route.params.id //接参
      }
    }
}
</script>

<style scoped>

</style>

12.3.4 修改静态路由表

修改路由表src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from "../components/Home";
import Product from "../components/Product";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/Home',
      component: Home
    },
    {
      path:'/Product/:id', //设参
      component:Product
    }
  ]
})

12.4 参数的传递

在路由表中设参

export default new Router({
  routes: [
    ...
    {
      path:'/Product/:id', //设参
      component:Product
    }
  ]
})

在App.vue中传参

<template>
  <div id="app">
    <ul class="nav nav-tabs">
      ...
      <li role="presentation"><router-link to="/Product/1">商品列表</router-link></li>
      ...
    </ul>
    <router-view/>
  </div>
</template>

在Product.vue中接参

<template>
    <div>商品列表 商品的id:{{id}}</div>
</template>

<script>
export default {
    name: "Product",
    data(){
      return{
        id:this.$route.params.id //接参
      }
    }
}
</script>

<style scoped>

</style>

12.5 程序式路由的实现

使用进行路由跳转是有局限性的，可以通过this.$router.push('/Product/1'）的js方式实现路由跳转，更加灵活。

<template>
  <div id="app">
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><router-link to="/Home">首页</router-link></li>
      <li role="presentation"><router-link to="/Product">商品列表</router-link></li>
      <button type="button" @click="btnfn">点我</button>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    btnfn(){
      //代替router-link实现路由跳转
      this.$router.push("/Product/1");
    }
  }

}
</script>