vue路由公用

    <div>
        //点击后传给值，并且改变type
        <button @click="change(‘A‘)">1</button>
        <button @click="change(‘B‘)">2</button>
    //判断有没有的话就不显示
        <min v-if="type.length !== 0" :type="type" :data="data"/>
    </div>

<script>
import min from "./min.vue";
export default {
    data() {
        return {
            type: "",
            data :‘‘//数据
        };
    },
    components: {
        min
    },
    //监控type的变化并且重新赋值
    methods: {
        change(v) {
            console.log(v);
            this.type = v;
        },
        //发axios
        async aj() {
            const { data } = await this.axios
                .get("https://www.tianqiapi.com/api/?version=v1")
                .then(data => data.data);
            this.data = data;
            console.log(data);
        },
        async ajx() {
            const { news } = await this.axios
                .get("http://meiriyikan.cn/api/json.php")
                .then(data => data.data);
            this.data = news;
            console.log(news);
        }
    },
    //监控type的类型变化，然后改变axios
    watch:{
        ‘type‘(){
            if(this.type ==‘A‘){
                this.aj()
            }else if(this.type == ‘B‘){
                this.ajx()
            }
        }
    }
};
</script>

    <div>
        //    接受父亲传过来的值，判断条件来显示那个；
        <div v-if="type== ‘A‘">{{data}}</div>
        <div v-if="type== ‘B‘" >{{data}}</div>
    </div>

<script>
import imgs from "./img";
export default {
    props: ["type", "data"]
};
</script>