vue-组件化开发

最新推荐文章于 2025-05-31 16:01:08 发布

今天学习了没_

最新推荐文章于 2025-05-31 16:01:08 发布

阅读量73

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44756893/article/details/118146685

版权

父子组件的访问方式

父组件可以直接访问子组件：使用$children (用的很少) 或 $refs

<div id="app">
        <cpn ref="aaa"></cpn>
        <cpn></cpn>

        <button @click = 'btnClick'>按钮</button>
    </div>

    <template id="cpn">
        <div>我是子组件</div>
    </template>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好'
            },
            methods:{
                btnClick(){
                    //1.$children
                    console.log(this.$children);
                    this.$children[0].showMessage();

                    //2.$refs 对象类型 默认为空 需要在某一个组件上添加 ref="" 属性 再从$refs.aaa获取 aaa相当于取得一个名字
                    console.log(this.$refs.aaa.name);
                }
            },
            components:{
                cpn:{
                    template:'#cpn',
                    data(){
                        return{
                            name:'我是子组件name'
                        }
                    },
                    methods:{
                        showMessage(){
                            console.log('showMessage')
                        }
                    }
                }
            }
            
        })
    </script>

子组件访问父组件：$parent （开发一般不用）因为不够独立

<body>
    <div id="app">
        <cpn></cpn>

    </div>

    <template id="cpn">
        <div>
            <h2>我是cpn组件</h2>
            <ccpn></ccpn>
        </div>
    </template>

    <template id="ccpn">
        <div>
            <h2>我是子组件</h2>
            <button @click = "btnClick">按钮</button>
        </div>
    </template>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好'
            },
            methods:{
            },
            components:{
                cpn:{
                    template:'#cpn',
                    methods:{ 
                    },
                    data(){
                        return {name:'我是cpn组件的name'}
                    },
                    components:{
                        ccpn:{
                            template:"#ccpn",
                            methods:{
                                btnClick(){
                                //1.访问父组件 $parent 
                                console.log(this.$parent.name)
                                //2.访问根组件
                                console.log(this.$root);
                                console.log(this.$root.message)
                        }
                            }
                        }
                    }
                }
            }
            
        })
    </script>
</body>

slot 插槽

组件的插槽：组件的插槽为了让封装的组件更具有扩展性
让使用者可以决定组件内部的一些内容到底展示什么

<template id="cpn">
        <h2>我是组件</h2>
        <h3>hahahah</h3>
        <slot></slot>
    </template>

<div id="app">
        <cpn><button>按钮</button></cpn>
        <cpn><span>milk</span></cpn>
        <cpn></cpn>
    </div>

    <template id="cpn">
        <div>
            <h2>我是组件</h2>
            <h3>hahahah</h3>
            <slot></slot>
        </div>
        
    </template>

1.插槽的基本使用：<slot> </slot>
2.默认值：<slot>button </slot>
3.如果有多个值同时放入到组件中进行替换时，会一起放到组件中替换元素

具名插槽的使用

例子：只改变中间的插槽

 <div id="app">
        <cpn><span slot="center">标题</span></cpn>
        
    </div>

    <template id="cpn">
        <div>
            <slot name="left">左边</slot>
            <slot name="center">中间</slot>
            <slot name="right">右边</slot>
        </div>
        
    </template>

编译的作用域

<div id="app">
        <cpn v-show="isShow"></cpn> //这里查找isShow会在id为app 的作用域内查找，比如vue实例的根组件
</div>

<template id="cpn">
      <div>    //这里查找isShow会在id为cpn的作用域内查找
          <button v-show="isShow"></button>
      </div>
</template>

作用域插槽的使用

父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译
父组件替换插槽的标签，但是内容由子组件来提供
父组件对子组件提供的内容展示不满意，父组件需要获取子组件内容以新的形式展示
例如：将Java c++ python用 - 连接

<div id="app">
        <cpn></cpn>
        <cpn>
            <!-- 目的是获取子组件中的Planguages -->
            <template slot-scope="slot">
                <!-- <span v-for="item in slot.data">{{item}}-</span> -->
                <span>{{slot.data.join('-')}}</span>

            </template>
        </cpn>
        <cpn></cpn>
    </div>

    <template id="cpn">
        <div>
            <!-- data只是个命名 可以取其他名字 -->
            <slot :data='pLanguages'>
                <ul>
                    <li v-for="item in pLanguages">{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:'你好啊'
            },
            components:{
                cpn:{
                    template:'#cpn',
                    data(){
                        return {pLanguages:['java','c++','python']}
                    }
                }
            }
        })
    </script>