custom-link 组件每个组件都维护一个独立的状态

最新推荐文章于 2022-11-23 11:14:27 发布

SpringYoungYu

最新推荐文章于 2022-11-23 11:14:27 发布

阅读量146

点赞数

本文链接：https://blog.csdn.net/qq_44917015/article/details/116202693

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="app">
        <div>
            <!-- {{name}} -->
            <!-- 组件间的传值 一种父子传值 就是父子传值 -->
            <!-- 事件触发在组件上 可以触发自定义的事件 这是调用dom的原生事件 -->
            <router-link to132="http://www.163.com" @click.native="click123">taobao</router-link>
            <router-link to132="http://www.186.com">tencent</router-link>
            <router-link to132="http://www.119.com">netease</router-link>
        </div>
    </div>
    <template id="tem">
        <div>
            {{ current == to132 ? '🚀': '' }}
            <a href="to132" @click.prevent='clickHandler(to132)'>
                <slot></slot>
            </a>
        </div>
    </template>

    <script src="../../vue.js"></script>
    <script>
        // 可以广播所有的组件
        let bus = new Vue();
        Vue.component("router-link", {
            template: "#tem",
            props: ['to132'],
            data: function () {
                return {
                    current: '',
                    name: "perry",
                    siteArr: [
                        { url: 'www.taobao.com' },
                        { url: 'www.qq.com' },
                        { url: 'www.163.com' },
                    ]
                }
            },
            methods: {
                clickHandler(e) {
                    bus.$emit('airHandler',e)
                }
            },
            mounted() {
                bus.$on( 'airHandler', (e)=>{
                    this.current = e
                })
                
            },
        });
        // root组件
        const vm = new Vue({
            el: '#app',
            data: {
                name: 'root组件',
                word: '岁月的童话',
                mov1: "狼的孩子雨和雪"
            },
            methods: {
                iptHandler(e) {
                    this.word = e.currentTarget.value
                },
                getVal(e) {
                    this.name = e
                },
                click123() {
                    // console.log(123123)
                }
            },
        });

    </script>
</body>

</html>

SpringYoungYu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
custom-link 组件每个组件都维护一个独立的状态

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫