vue中父组件向子组件传递值、方法

ゝ一世哀愁。 2023-07-13 11:00 122阅读 0赞

> 在vue中 子组件是默认无法访问到父组件data中的数据和methods中的方法的,所以我们需要使用特定的方法来完成它。

## 一、父组件向子组件传值  ##

通过 props声明传递过来的值即可：

流程:

1、通过属性绑定把父组件中需要传递的内容通过v-bind的形式传递给子组件，供子组件使用。

2、在子组件内部通过props来获取父组件传递过来的属性名(props是单向向下绑定的，可以通过父组件中改变而同时改变下级的内容,但是反过来会报错，可以通过在data中定义一个属性并将这个 prop 用作其初始值，同步对组件的修改，再通知父组件更新)。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edg">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            
            <com1 v-bind:parentmsg="msg" @click="change()"></com1>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'123 A -父组件中的数据' 
            },
            methods:{},
            components:{
                com1:{
                    data(){ //注意:子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过Ajax，请求回来的数据，都可以放到data身上
                    //Data上的数据都是可读可写的
                        return{
                            title:'123',
                            content:'qqq'
                        }
                    },
                    template:'<h1>这是子组件----{
       { parentmsg }}</h1>',
                    //注意：组件中的所有props中的数据 都是通过父组件传递给子组件的。
                    //props 中的数据，都是只读的，无法重新赋值
                    props:['parentmsg'], //把父组件传递过来的parentmsg属性 现在props数组中定义一下，这样才能使用这个数据
                    methods:{
                        change(){
                            this.parentmsg = '1111'
                        }
                    }
                }
            }
        })
    </script>
    </html>

### ![20200311212350371.jpg][]**点击改变prop属性时** ###

![20200311212434904.jpg][]

## 二、父组件向子组件传递方法 ##

可以通过$emit方法来调用父组件传递过来的方法与传值类似，

案例中在父组件中声明了一个show方法,通过@func将方法传递给子组件。

流程:

1.通过自定义一个事件名来将方法绑定到子组件上传到子组件内部。

2.子组件通过$emit()来调用父组件的方法

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edg">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            
            <com2 @func="show"></com2>
        </div>
    
        <template id="tmp1">
            <div>
                <h1>这是子组件</h1>
                <input type="button" value="这是子组件中的按钮-点击它触发父组件传递过来的func方法" @click="myclick">
            </div>
        </template>
    </body>
    <script>
        // 声明一个子组件，并添加到父组件的components中
        var com2 = {
            template:'#tmp1',
            data(){
                return{
                    sonmsg:{name:'son',age:6}
                }
            },
            methods:{
                myclick(){
                    //emit 触发
                    this.$emit('func',this.sonmsg)
                }
            }
        }
    
        var vm = new Vue({
            el:"#app",
            data:{
                FormSon:null
            },
            methods:{
                show(data){
                    console.log('调用了父组件身上的show 方法-----'+data.name)
                    this.FormSon = data;
                }
            },
            components:{
                com2
            }
        })
    </script>
    </html>

如有不对希望各位批评指正，在此感谢大家!

[20200311212350371.jpg]: https://img-blog.csdnimg.cn/20200311212350371.jpg
[20200311212434904.jpg]: https://img-blog.csdnimg.cn/20200311212434904.jpg