vue中父组件向子组件传值以及事件传递

最新推荐文章于 2024-07-23 14:29:05 发布

WindSearcher

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量5.8k

点赞数 1

分类专栏： web 文章标签： vue组件通信

本文链接：https://blog.csdn.net/qq_40511966/article/details/97654825

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

父组件向子组件传值

props

1.首先在子组件上定义一个引用，用来引用父组件的值(类似于动态绑定，绑定父组件中的值，然后通过props传给子组件)

2.在子组件中加入props

可以看看这篇文章，来自于官网

https://cn.vuejs.org/v2/guide/components-props.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
   <div id="app">
       <com1 v-bind:parentmsg="msg" v-on:func="show" ref="com1"></com1>
       <input type="button" value="获取子组件" @click="getSon">
   </div>
<script>
    com1 = {
        template:'<h3 @click="change">这是父组件{{parentmsg}}</h3>',
        props:['parentmsg'],
        data(){
            return{
                title:'123'
            }
        },
        methods:{
           change(){
               console.log(this.parentmsg);
               this.$emit('func');
           }
        }
    };

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'父组件'
        },
        methods:{
            show(){
                console.log("调用父组件方法");
            },
            getSon(){
                console.log(this.$refs.com1.parentmsg);
                this.$refs.com1.change();
            }
        },
        components:{
            com1
        }
    })
</script>
</body>
</html>

可以看出子组件com1上有一个v-bind:parentmsg="msg",也就是子组件定义parentmsg来引用父组件msg

然后在com1子组件中加入props，这样子组件就可以使用parentmsg。利用这个我们做一个小实例。需求：我们需要把父组件中的movies传递给com1子组件显示，怎么做呢？可以使用props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <com1 v-bind:parentmovies="movies"></com1>
</div>

<!--v-for不能使用在根元素上-->
<template id="com1">
    <div>
        <div v-for="movie in parentmovies">{{movie}}</div>
    </div>
</template>

<script>

    const com1 = {
        template:'#com1',
        props:['parentmovies'],
        data(){
            return{

            }
        },
        methods:{

        }
    };

    var vm = new Vue({
        el:'#app',
        data:{
            movies:['海王','海泽王','李白']
        },
        methods:{

        },
        components:{
            com1
        }
    })
</script>
</body>
</html>