【组件之间的通信】

我是大苹果1212

已于 2022-02-10 11:02:28 修改

阅读量516

点赞数 1

文章标签： vue.js

于 2022-01-19 17:16:57 首次发布

本文链接：https://blog.csdn.net/qq_47666300/article/details/122584248

版权

组件应用：

1.组件的使用（全局）

<div id='app'>
    <!-- 3.使用组件 -->
    <my_cpcc></my_cpcc>

</div>
<script>
    //1.创建组件构造器
    const cpcc = vue.extend({
        template: `
        <div>
            <h2>我是组件</h2>
        </div>
            `
    });
    //2.注册组件，并且定义组件标签的名称 （全局组件）
    Vue.component('my_cpcc' , cpcc) //两个参数是 标签名 构造器
    Vue app = new Vue({
        el:'#app'
    })
</script>

2.局部组件

<div id='app'>
    <!-- 3.使用组件 -->
    <cpn></cpn>

</div>
<script>
    //1.创建组件构造器
    const cpcc = vue.extend({
        template: `
        <div>
            <h2>我是组件</h2>
        </div>
            `
    });
    //2.注册组件，并且定义组件标签的名称
    Vue.component('my_cpcc' , cpcc)
    Vue app = new Vue({
        el:'#app',
        components:{
            //cpn使用组件时的标签名
            cpn:cpcc
        }
    })
</script>

3.父组件和子组件（子组件放入父组件，父组件放入根组件）

<script>
    //1.创建第一个组件构造器(子组件)
    const cpcc1 = vue.extend({
        template: `
        <div>
            <h2>我是第一个组件</h2>
        </div>
            `
    });
    //2.创建第二个组件构造器(父组件)
        const cpcc2 = vue.extend({
        template: `
        <div>
            <h2>我是第二个组件</h2>
            <cpcc1></cpcc1>
        </div>
            `,
        components:{
            cpcc1:cpcc1
        }
    });
    //3.注册组件，并且定义组件标签的名称
    Vue.component('my_cpcc' , cpcc)
    Vue app = new Vue({
        el:'#app',
        components:{
            //cpn使用组件时的标签名
            cpn:cpcc2,
            cpn:cpcc1
        }
    })
</script>

4.父子组件语法糖写法

<div id='app'>
    <!-- 2.使用组件 -->
    <my_cpcc></my_cpcc>
    <cpn></cpn>


</div>
<script>
    // 1.注册组件（全局）
    Vue.component('my_cpcc' , {
        template: `
        <div>
            <h2>我是第一个组件</h2>
        </div>
            `
    })


    //1.2组测局部组件语法糖
    Vue app = new Vue({
        el:'#app',
        components:{
            cpn:{
                template: `
                <div>
                    <h2>我是第一个组件</h2>
                </div>
                    `
            }
        }
    })
</script>

5.注册组件模板分离写法

<div id='app'>
    <!-- 2.使用组件 -->
    <cpn v-bind:cbp='bp'></cpn>

</div>

<template id='cpn'>
    <div>
        <h2>我是子组件</h2>
        <h2>{{cbp}}</h2>
    </div>
</template>

<script>
    //父传子
    const cpn = {
        template:'cpn',
        props:['cbp'], //传数组
        
        data(){
            return{}
        }
    }

    const app = new Vue({
        el:'#app',
        data:{
            bp:'lisa',//在父组件中新加一条数据
        },
        component:{
            cpn
        },

    })
</script>

<div id='app'>
    <!-- 2.使用组件 -->
    <cpn></cpn>

</div>

<template id='cpn'>
    <div>
        <h2>我是模板分离写法2的组件</h2>
    </div>
</template>

<script>
    // 1.注册组件
    Vue.component('cpn' , {
        template:#cpn
    })

    const app = new Vue({
        el:'#app',

    })
</script>

父子组件之间的通信：

1.父传子组件传递数据父->子 props

<div id='app'>
    <!-- 2.使用组件 -->
    <cpn v-bind:cbp='bp'></cpn>

</div>

<template id='cpn'>
    <div>
        <h2>我是子组件</h2>
        <h2>{{cbp}}</h2>
    </div>
</template>

<script>
    //父传子
    const cpn = {
        template:'cpn',
        props:['cbp'], //传数组
        
        data(){
            return{}
        }
    }

    const app = new Vue({
        el:'#app',
        data:{
            bp:'lisa',//在父组件中新加一条数据
        },
        component:{
            cpn
        },

    })
</script>

props里有很多种写法

        props:{
            //类型限制
            cbp:Array,
            //提供默认值
            cbp:{
                type:String,
                default:'我是默认值', //如果不写v-bind绑定 v-bind:cbp='bp'时，子组件显示默认值
                required:true, //如果写这个就是代表这个属性是必须传的，不穿会报错
            },
            //类型是对象或者数组时，默认值必须是一个函数
            cbp:{
                type:Array,
                default(){
                    return[]
                }
            }
        },

2.子传父自定义事件

<!-- 父组件 -->

<div id='app'>
    <cpn @launch='receive'></cpn>
</div>

<!-- 子组件模板 -->
<template id='cpn'>
    <button @click='btnclick(item)'></button>
</template>

<script>
    //子组件
    const cpn = {
        template:'cpn',
        data(){
            return {
                data:'a'
            }
        },
        methods:{
            btnclick(item){
                //子组件发射事件，自定义事件
                this.$emit('launch',item)
            }
        }
    }
    //父组件
    const app = new Vue({
        el:'#app',
        data:{
        },
        component:{
            cpn
        },
        methods:{
            //父组件接收
            receive(item){
                console.log(item)
            }
        }

    })
</script>

脚手架中子传父+组件：

1.子组件中发射事件

2.父组件中导入子组件，在conpoments中注册

3.父组件接收

watch属性监听：

1.watch本身是一个对象，和data，props一个层级

<script>

    const app = new Vue({
        el:'#app',
        data:{
        },
        props:{
            name:''
        },
        watch:{
            //监听什么变化就叫什么名字
            name(newValue,oldvalue){
                //一旦改变就进入这里
            }
        }
    })
</script>

父子组件访问方式：

1.父访问子组件： $children $refs reference(引用)

<div id='app'>
    <div>
        <cpn ref='aaa'></cpn>
        <button @click='btnclick'>按钮</button>
    </div>
</div>
<template id='cpn'>
    <div>我是子组件</div>
</template>

<script>

    const app = new Vue({
        el:'#app',
        data:{
            message:'新年快乐'
        },
        methods:{
            btnclick(){
                console.log(this.$children);//方法一
                console.log(this.$refs.aaa);//方法二 对应对象类型，默认是一个空的对象ref=‘bbb’
                this.$children[0].showMessage()
            }
        },
        components:{
            cpn:{
                template:'#cpn',
                methods:{
                    showMessage(){
                        console.log('message')
                    }
                }
            }
        }

    })
</script>

2.子访问父：$parent

<div id='app'>
    <cpn></cpn>
</div>
<template id='cpn'>
    <div>
        <div>我是子组件</div>
        <button @click='btnclick'>按钮</button>
    </div>
</template>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'新年快乐'
        },
        components:{
            cpn:{
                template:'#cpn',
                methods:{
                    btnclick(){
                        //子组件访问父组件$parent
                        console.log(this.$parent)
                        console.log(this.$parent.data)
                        //访问根组件
                        console.log(this.$root) //访问vue实例
                        
                    }
                }
            }
        }

    })
</script>