vue-lic（三）

通过导航栏跳转

点击对应列表项，通过路由进行跳转

active-class属性：点击router-link的内容，匹配对应样式

exact-active-class：点击router-link的内容，匹配对应样式(更精确)（这里是调整点击后文字的颜色）

<template>
    <div class="nav">
        <ul>
            <li v-for="(value,index) in navarr" :key="index">
                <router-link :to="value.url" exact-active-class="textColor">{{ value.name }}</router-link>
            </li>
        </ul>
        
    </div>
</template>
<script>
export default {
    name:"NavDemo",
    data(){
        return{
            navarr:[
                {name:"首页",url:"/"},
                {name:"MV",url:"/mv"}
            ]
        }
    }
}
</script>

跨域

Vue 应用中的跨域问题通常是由于浏览器的同源策略引起的，它阻止了一个源（origin）的网页上的JavaScript 代码请求另一个源的资源。

也就是说，只要https://www.baidu.com中https://，www.baidu，.com中有一个不一样，就会导致存在跨域问题。

解决办法：

在vue.config.js的module.exports中添加代码

devServer: {
    // 反向代理(处理跨域问题)
    proxy: {
      "/api": {  // /api表示拦截以/api开头的请求路径
        target: "https://www.vue-js.com/api", //目标路径
        changeOrigin: true, //是否开启跨域
        ws: false,
        pathRewrite: { //重写路径
          "^/api": ""
        }
      }
    }
  }

这里是把有 "/api" 的路径都拦截，并把在 "/api" 前面的变成"https://www.vue-js.com/api"，这里因为本身就有/api，再添加了一个/api，所以需要去掉一个/api，也就是重写路径。

传递数据（父子组件之间）

组件之间传递数据的方式

1. 正向(向下)传递数据-->父组件给子组件通过自定义属性传递数据，子组件用props接收

2.逆向传递数据(vue不支持逆向传递)-->子组件给父组件传递，通过$emit("事件名",要传递的数据)自定义监听事件

3.$refs -->获取所有的组件

4.$children 从父组件中获取所有的子组件(获取到的是一个数组)

5.$parent 通过子组件获取父组件

<script>
import OneDemo from './OneDemo.vue';
import TwoDemo from './TwoDemo.vue';
export default {
    name:"FuDemo",
    data(){
        return{
            str:"父组件的str"
        }
    },
    components:{
        OneDemo,
        TwoDemo
    },
    methods:{
        getAll(){
            // $refs 获取所有组件
            // console.log("父组件中获取所有组件：",this.$refs);
            // this.$refs.parentStr.innerHTML = "这是通过$refs获取到节点并修改的数据"
            
            // 获取子组件中的数据并修改
            // console.log(this.$refs.one.getData);
            // this.$refs.one.str = "在父组件中通过$refs获取到one组件并修改数据";
 
            // 调用子组件中的函数
            // this.$refs.one.getData();
 
            // 获取当前父组件中的所有子组件
            // console.log(this.$children);
            // 修改子组件中的数据
            // this.$children[1].str = "通过$children获取到two组件并修改数据"
 
            // console.log(this.$refs.two.$parent);
            this.$refs.two.$parent.str = "自己修改自己的数据";
        }
    }
}
</script>