在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">
        <!-- 父组件,可以在引用子组件的时候,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用 -->
        <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>

点击改变prop属性时

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

可以通过$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">
        <!-- 父组件想子组件传递方法,使用的是 事件绑定机制 v-on 当我们自定义了一个事件属性后,那么,子组件就能够通过某些方法来调用传递进去的这个方法了 -->
        <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>

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

Logo

前往低代码交流专区

更多推荐