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

在vue中子组件是默认无法访问到父组件data中的数据和methods中的方法的,所以我们需要使用特定的方法来完成它。一、父组件向子组件传值通过 props声明传递过来的值即可：流程:1、通过属性绑定把父组件中需要传递的内容通过v-bind的形式传递给子组件，供子组件使用。2、在子组件内部通过props来获取父组件传递过来的属性名(props是单向向下绑定的，可以通过父...

陈橙橙丶

6150人浏览 · 2020-03-11 21:32:58

陈橙橙丶 · 2020-03-11 21:32:58 发布

在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>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^