欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue父子组件之间传值

程序员文章站 2023-10-15 13:17:48
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件。 父组件向子组件传值 下面用的script引入的方式,那种vue-cli搭建的同理 父组件通过 v-bind:属性名(自定义的) = "要传递的数据" 子组件 ......

  vue父子组件进行传值

  vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件。

 

  父组件向子组件传值

  下面用的script引入的方式,那种vue-cli搭建的同理

  父组件通过 v-bind:属性名(自定义的) = "要传递的数据"

  子组件通过 props:["属性名"]  这个属性名就是父组件传递过来的数据信息

<div id="app">
    <mod :abc="name" :d="title"></mod>
</div>

/*
    父组件向子组件发送消息
*/
vue.component('mod',{
    template:'<div>{{abc}} {{d}}</div>',
    props:['abc','d'],
    data:function () {
        return {

        }
    }
});


// 父组件向子组件传递数据

new vue({
    el:"#app",
    data:{
        name:'123',
        title:'456'
    }
});

  

  子组件向父组件传值

  子组件向父组件传值时,子组件中 通过$.emit('自定义名字',‘要传递的数据’)

  父组件通过 v-on:子组件自定义的名字 = 函数  函数的arguments中就会接收到这个值

<div id="app">
    <!-- 绑定要发送的消息的名称 -->
    <wulv @aabb="abc"></wulv>
</div>

vue.component('wulv',{
    template:'<div><button @click="btn">按钮</button></div>',
    methods:{
        btn(){
            // 发送消息
            // 事件的名称 后面所有的都是要传递的消息
            this.$emit('aabb','a','b','c');
        }
    }
});

new vue({
    el:'#app',
    methods:{
        abc(){
            console.log(arguments);   // 这里的arguments就是传递过来的值
        }
    }
})

  父子组件传值非常简单,多用几次就可以学会了,在此作为笔记记录下来。

  

  如果你有幸看到我的文章学到了一点东西,我会非常高兴的。