Vue组件（Vue-cli）+vue路由+父子组件传参+Axios跨域

最新推荐文章于 2022-07-10 15:34:36 发布

YD_1989

最新推荐文章于 2022-07-10 15:34:36 发布

阅读量239

点赞数

分类专栏：前端基础文章标签： vue

本文链接：https://blog.csdn.net/m0_58680865/article/details/119815825

版权

前端基础专栏收录该内容

23 篇文章 1 订阅

订阅专栏

Vue组件（Vue-cli）

以前：HTML、CSS、JavaScript只有一个一级节点html

<html>
<style></style>
<script></script>
</html>

现在：HTML、CSS、JavaScript具有3个一级节点

SFC规范：单文件组件规范

理解：以前前台是由很多【HTML页面】组成；以前前台是由很多【vue组件】组成

1、自定义组件（components）

步骤：（1）创建vue项目，用VScode打开文件夹

（2）在components文件夹下创建文件A.vue,B.vue

（3）自定义组件

要点①：组件的根标签要是template标签

要点②：template标签中只能有一个根节点。比如：template标签里写一个根节点div，那么就只能有唯一的一组div标签作为根节点，否则报错。（根节点不局限于div，可以是任何标签，但必须唯一）

<template>
    <div>
       //所有的组件内容写在根节点中
    </div>
</template>

要点③：组件一定要导出才能够使用

<script>
export default {
   name:'A',//名字属性，通常和文件名一样，比如文件名A.vue，这里name就写A
}
</script>

（4）打开App.vue（App.vue工程的入口组件，用来访问工程的主页面）文件

①导入组件

//在script标签中导入A,B两个组件
//“ . ”表示当前路径
import A from './components/A.vue'
import B from './components/B.vue'

②注册组件：components

export default {
  name: 'App',
  components: {
    A,B
  }
}

③引用组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
     //引用组件
    <A></A>
    <B></B>
  </div>
</template>

（5）data：组件中，data变成一个方法（以前是属性，组件中是方法）

export default {
name:'A',
data(){
    return {
        person:{name:'张三',age:30}
    };
}  
}

2、两个组件实例

（1）例子1

<template>
    <div>
        <input type="text" v-model="person.name" /><br />
        <input type="text" v-model="person.age" /><br />
    </div>
</template>
<script>
export default {
    name:'A',
    data(){
        return {
            person:{name:'张三',age:30}
        };
    }
}
</script>

（2）例子2

<template>
    <div>
        <table>
            <thead>
                <tr><th>序号</th><th>名字</th><th>年龄</th></tr>
            </thead>
            <tbody>
                    //v-bind:key="index"是下载了eslint后需要这么做不报错
                <tr v-for="(person, index) of list" v-bind:key="index">
                    <td>{{index+1}}</td>
                    <td>{{person.name}}</td>
                    <td>{{person.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
export default {
    name:'B',
    data(){
        return {

            list:[{name:'李四',age:40},{name:'王五',age:50}]

        };
    }
}
</script>

3、组件嵌套

示例：把A，B两个组件放在D组件里面,显示D页面

//D.vue界面代码
<template>
    <div>
        <h1>D页面</h1>
        <A></A>
        <B></B>
    </div>
</template>
<script>

//此处导入组件要用@开头，代表src的意思
import A from '@/components/A.vue'
import B from '@/components/B.vue'

export default {
    name:'D',
    components:{
        A,B
    }
}
</script>

//App.vue界面代码
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <D></D>   
  </div>
</template>

<script>
// 导入组件
import D from './components/D.vue'

export default {
  name: 'App',
  // 注册组件
  components: {
    D
  }
}
</script>

Vue路由

(一)路由安装：npm install vue-router

(二)创建配置路由文件(src/router/index.js)

（1）导入vue：import Vue from ‘vue’

（2）导入路由：import Router from ‘vue-router’

（3）在vue实例中使用路由：Vue.use(Router);

（4）导入组件

（5）创建路由实例并导出

//（1）导入vue
import Vue from 'vue'
//（2）导入路由
import Router from 'vue-router'

//（4）导入组件
import A from '@/components/A.vue'
import B from '@/components/B.vue'
import D from '@/components/D.vue'

//（3）在vue实例中使用路由
Vue.use(Router);

//（5）创建路由实例并导出（路由就像一个导航栏一样）
export default new Router({
    //路由配置：里面是一个数组
    routes:[
        {
            name:'A',//路由名字
            path:'/A',//跳转路径（访问路径）
            component:A//组件属性
        },
        {
            name:'B',
            path:'/B',
            component:B
        },{
            name:'D',
            path:'/D',
            component:D
        }
    ]
})

(三)main.js：在入口js文件中引入路由

（1）引入路由：import router from ‘./router’

（2）router引入

//（1）引入路由
import router from './router'

new Vue({
    //router引入
  router,
  render: h => h(App),
}).$mount('#app')

(四)使用路由（App.vue）

（1）router-view:显示页面

（2）router-link：跳转路径标签，里面有跳转属性to

//（1）router-view:显示页面（显示路由视图）
<router-view></router-view>
//（2）router-link：跳转路径标签，里面有跳转属性to
<router-link to="/A">A组件</router-link>
<router-link to="/B">B组件</router-link>
<router-link to="/D">D组件</router-link>

***注意：如果现在想访问首页面（假设是A页面为首页面）***

export default new Router({
    routes:[
        {
            path:'/',//定义一个根路径
           redirect:'/A'
        }
    ]
})

附加：如果不想在文件(src/router/index.js)文件中导入组件，也可以使用箭头函数引入：

以import A from '@/components/A.vue’为例：

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

 		{
            name:'A',
            path:'/A',
            component:() => import(@/components/A.vue)
        }

(五)路由的跳转（写在方法methods里面）

①根据路由名字跳转

②根据路由路径跳转

//根据路由名字跳转
//this表示当前vue的实例
this.$router.push({name:'B'})

//根据路由路径跳转
//this表示当前vue的实例
this.$router.push({path:'/B'})

(六)路由的跳转：数据的传递（传参）

前端的数据有两种：①前台和后台的数据交互

②前台各个组件之间的数据传递

举例说明：

假设目前有两个组件A组件和B组件，A组件是一个表格，有很多行，里面有数据比如“张三，30”。现在要做一个查询的功能，一点击“编辑”，它要跳转到B页面，B组件是一个单个部门信息表单，然后把张三的所有信息都列出来：

方法一：向后台发请求。后台有一个根据id查找单个的方法，点击编辑后，后台根据id查到了张三的信息，然后把张三的信息传给B组件（适用于并发量大）

方法二：通过组件跳组件，A组件的数据信息跳到了B组件（适用于并发量小）

A组件	B组件
表格	单个部门信息表单
张三，30
后台数据

（1）根据路由名字跳转传参：params

this.$router.push({name:'B',params:{a:1,b:2}})
this.$route.params.a
this.$route.params.b

（2）根据路由路径跳转传参：query

this.$router.push({path:'/B',query:{c:3,d:4}})
this.$route.query.c,//拿到c的数据
this.$route.query.d//拿到d的数据

（七）附加：路由配置的属性

export default new Router({
    mode: 'history', //路由模式，取值为history与hash
    base: '/', //打包路径，默认为/，可以修改
    routes: [
    {
        path: string, //路径
        component: Component; //页面组件
        name: string; // 命名路由-路由名称
        components: ( ComponentName | ()=>import('页面地址') ); // 命名视图组件
        redirect: string | Location | Function; // 重定向
        props: boolean | string | Function; // 路由组件传递参数
        alias: string | Array<string>; // 路由别名
        children: Array<RouteConfig>; // 嵌套子路由
        beforeEnter?: (to: Route, from: Route, next: Function) => void; // 路由单独钩子
        meta: any; // 自定义标签属性，比如：是否需要登录
        icon: any; // 图标
        // 2.6.0+
        caseSensitive: boolean; // 匹配规则是否大小写敏感？(默认值：false)
        pathToRegexpOptions: Object; // 编译正则的选项
    }
    ]})

重点：父子组件之间的传参

D父组件

A子组件

1、父组件向子组件传参（传递数据）：通过【自定义属性：props】传参

说明：通过props属性

父组件 D向子组件 A传参示例：

//父组件D
<template>
    <div>
        <h1>父组件D</h1>
        <A c1='王五' c2='50'></A>
	</div>
</template>

//子组件A组件
<template>
    <div>
        <h1>子组件A</h1>

        //A页面显示C1，C2
        {{c1}}{{c2}}
		
		//也可以A页面绑定C1，C2
        <input type="text" v-model="person.name" /><br />
        <input type="text" v-model="person.age" /><br />
      
    </div>
</template>
<script>
export default {
    name:'A',
    data(){
        return {
           person:{name:'',age:''}
        };
    },
    methods:{
    //props:属性定义    
    props:['c1', 'c2']
}
</script>

2、子组件向父组件传递参数：通过【自定义事件：$emit】传

//子组件A组建
<template>
    <div>

        <h1>A页面</h1>

        <button @click="m3">子组件传递数据到父组件</button>
    </div>
</template>
<script>
export default {
    name:'A',
    data(){
        return {
            
        };
    },
    methods:{
        m3(){
            // 第一个参数：事件
            // 第二个参数：数据
            //$emit:用来注册事件
            //向父组件传了一个赵六，一个60
            this.$emit('e1','赵六');
            this.$emit('e2','60');
        }
    }
}
</script>

//父组件D组件
<template>
    <div>

        <h1>D页面</h1>
		//触发e1事件，调用method1方法
        <A @e1="method1" @e2="method2"></A>
    </div>
</template>
<script>
import A from '@/components/A.vue'
import B from '@/components/B.vue'

export default {
    name:'D',
    components:{
        A,B
    },
    methods:{
        method1(v1){
            alert(v1);
        },
        method2(v2){
            alert(v2);
        }
    }
}
</script>

子组件传父组件的逻辑思路：

在子组件A组件点击按钮调用m3方法，触犯e1事件，由于e1组件在父组件D组件里绑定的是method1方法，就会把e1的参数’赵六’通过method1的参数v1传进来；另一个同理

YD_1989

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue组件（Vue-cli）+vue路由+父子组件传参+Axios跨域

Vue组件（Vue-cli）以前：HTML、CSS、JavaScript只有一个一级节点html<html><style></style><script></script></html>现在：HTML、CSS、JavaScript具有3个一级节点SFC规范：单文件组件规范理解：以前前台是由很多【HTML页面】组成；以前前台是由很多【vue组件】组成1、自定义组件（components）步骤：（1）创建vue项目，用
复制链接

扫一扫