Vue Day02

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

 

 

     

   

1.

跳转到page2

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

// 导入依赖 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.使用组件

3。

     

       

4.父传子 （子组件 SonComp）

        

  data () {

    return {

      msg:"hello1"

    }

  },

子组件使用：

{{abc}}

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

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

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

  // props:['abc'],

  props:{

    //名:类型

    'abc':String

    // abc:{

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

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

    // }

  },

5.子传父 子组件 （ZoomIn）

     父组件：

    methods:{

      handle(val){

              this.fs=val

      }

    },

子组件：

放大

    fun(){

        this.num++

        // $emit 触发自定义事件

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

    }

  },