组件和路由的使用

组件和路由的使用

vue组件
组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。
组件化和模块化的区别：
● 模块化：是从代码功能逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
● 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用
● 注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！
组件中展示数据和响应事件
为什么组件中的data属性必须定义为一个方法并返回一个对象：数据隔离
使用flag标识符结合v-if和v-else切换组件
mode=“out-in”：只能用于组件
component标签里面有一个is属性，用来展示组件
使用组件
在页面中有个components属性，进行导入组件，把组件名当做标签使用
父子组件传参
父组件向子组件传参

1. 在父组件的子标签中自定义一个属性

<template>
  <div>
 		 <child-module :content="content"/>
  </div>
</template>
<script>
import ChildModule from '@/components/ChildModule.vue'

export default {
  name: 'FatherModule',
  components: {
    ChildModule
  },
  data() {
    return {
      content: "text"
    }
  }
}
</script>

3. 在子组件中有一个props属性，用来接收父组件传递过来的参数
   a. 父组件传过来的数据是无法修改的
   b. 定义接收的类型 还可以定义多种类型 [string，Undefined，Number]
   c. 可以设置默认值

<template>
<div>
  <div>{{ content }}</div>
</div>
</template>

<script>
export default {
name: 'ChildModule',
props: {
  content: {
    // 定义接收的类型 还可以定义多种类型 [string，Undefined，Number]// 如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值
    type: [String],
    // 定义是否必须传
    required: true,
    // 定义默认值
    default: '暂无'
    type:{
      // type定义类型
      type:[Number,String,Object]
    // 基本类型
      default: 30
    // 引用类型
      default:() => {
        return {}
      }
    }
  }
}
}
</script>

子组件向父组件传参
4. 在父组件的子标签中自定义一个事件，事件里面有一个参数，用来接收子组件的传参

<template>
  <div>
    <child-module
        ref="childModuleRef"
        :content="content"
        @getData="getData"/>
    <div>{{ childValue }}</div>
  </div>
</template>
<script>
import ChildModule from '@/components/ChildModule.vue'

export default {
  name: 'FatherModule',
  components: {
    ChildModule
  },
  data() {
    return {
      content: "text",
      childValue: ''
    }
  },
  methods: {
    // childrenData就是子组件传递过来的参数
    getData(childrenData) {
      console.log(childrenData)
      this.childValue = childrenData
    }
  }
}
</script>

5. 在子组件中有一个方法this.$emit(‘自定义事件的名字’，传递的数据)

<template>
  <div>
    <div>{{ content }}</div>
    <button @click="onClick">点击向父组件传参</button>
  </div>
</template>

<script>
export default {
  name: 'ChildModule',
  props: {
    content: {
      // 定义接收的类型 还可以定义多种类型 [string，Undefined，Number]// 如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值
      type: String,
      // 定义是否必须传
      required: true,
      // 定义默认值
      default: '暂无'
    },
  },
  data() {
    return {
      num: 1
    }
  },
  methods: {
    onClick() {
      // this.$emit(自定义事件的名字，传递的数据)
      this.$emit("getData",this.num)
    }
  },
  // created() {
  //   // this.$emit(自定义事件的名字，传递的数据)
  //   this.$emit('getData',this.num)
  // }
}
</script>

Vue中路由的使用
路由重定向
redirect 可以进行路由的重定向
选中路由高亮
6. 使用默认的样式
直接设置 router-link-active
常见于导航栏
7. 自定义样式
配置 linkActiveClass:‘自定义的类名’
组件的嵌套
● 声明路由的时候设置children,这是children是一个数组，数组里是路由对象，path路径后面不加’/’
● 这个children的组件就会渲染在它父组件的中
命名视图
● 我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件
● 在路由对象里面声明component属性，里面写的是组件名称，
○ 设置默认值default对应组件可以设置名字也可以访问
● 在父组件用router-view里面有一个name属性进行展示
○ 这个名字和components组件名字是对应的
$ router 和 $ route的区别
$router : 是路由操作对象，只写对象
$route : 路由信息对象，只读对象
$ router操作路由跳转
声明式
8. router-link to=‘{path:‘路由地址’,query:{传递的参数}}’
9. router-link to=‘{name:‘路由名字’,params:{传递的参数}}’
a. 必须修改路由地址/：传递的参数的属性名
函数式
10. this.$router.push(name{:}^{\prime }路由名{字}^{\prime },params:传递的参数)11.this.$router.push({ path:‘路由名字’, query:{传递的参数} })
12. this.$router.replace()13.this.$router.go()
14. this.$router.back()接收参数15.this.$route

{
  path:'/pageB/:id',
  component:pageB
}
// 声明式
<router-link :to='{path:'/pageB',params:{id:999}}'></router-link>
// 函数式
<button @click='toPageB'>按钮</button>
methods:{
  toPageB(){
    this.$router.push({ name:'hello', params:{ id:999 } })
  },
  toPageB(){
    this.$router.push({ path:'/pageB', query:{id:999} })
  },
  toPageB(){
    this.$router.replace({ name:'hello', query:{id:999} })
  }
}

$route读取 路由参数接收

var name = this.$route.query.name;