Vue Day02

下载路由：npm i vue-router@3.5.2 -S

 <!-- 路由占位符 ： 其他的组件会替代 路由占位符 -->

 <!--  在App可不使用 但无组件渲染 -->

     <!-- 根组件实际渲染到  public/index.html -->

    <router-view/>

1.<!-- 路由跳转 -->

<!-- router-link 最终会渲染成a标签 to属性会渲染成href属性 -->

<router-link to="/page2"> 跳转到page2</router-link>

需要配置路径（配置路由）

// 导入依赖 node_modules 直接写依赖的名称

import Vue from 'vue'

// 导入页面组件 导入自己写的文件时必须使用相对路径

import Page1 from '../views/Page1.vue'

const routes = [

  {

    // 使用时路径，自己定义

    path: '/page1',

    // 自己定义

    name: 'page1',

    // 导入的页面组件名

    component: Page1

  },

2.组件的使用步骤:

        1.创建组件

        2.导入组件

// 引入公共组件

//                        路径 @指向src文件夹

                import HeaderView from '@/components/HeaderView.vue'

        3.注册组件

  components: {

// 注册组件

    HeaderView : HeaderView，

  // 当变量名和属性名一致时，可以省略变量名

HeaderView

}

        4.使用组件

<header-view></header-view>

3。

      <!-- 多个组件只显示一个  -->

      <component :is="showComp"> </component>  

4.父传子 （子组件 SonComp）

        <son-comp :abc="msg"></son-comp>

  data () {

    return {

      msg:"hello1"

    }

  },

子组件使用：

<p>{{abc}}</p>

  // 用来接收父组件传递的参数

  // 数据的元素是父组件的属性名

  // 单向数据流(父->子  )

  // props:['abc'],

  props:{

    //名:类型

    'abc':String

    // abc:{

    //   type:String,//数据类型

    //   default:'ok!' //默认值

    // }

  },

5.子传父 子组件 （ZoomIn）

     父组件：

<!--自定义事件  -->

<zoom-in @fangda="handle"></zoom-in>

    methods:{

      handle(val){

              this.fs=val

      }

    },

子组件：

<button @click="fun()">放大</button>

    fun(){

        this.num++

        // $emit 触发自定义事件

        this.$emit('fangda',this.num)

    }

  },