【必看】Vue如何通过子组件向父组件传值？子组件的参数如何传到父组件？

1.子向父的通信–调用父的无参方法结论：子组件是无法直接改变父组件的数据的，只能通过父组件改变他自己的数据来看这样的一个案例：<div id="app"><h2>num: {{num}}</h2><co

好奇的嫣朵拉

4640人浏览 · 2018-12-10 15:24:26

好奇的嫣朵拉 · 2018-12-10 15:24:26 发布

1.子向父的通信–调用父的无参方法

结论：子组件是无法直接改变父组件的数据的，只能通过父组件改变他自己的数据

来看这样的一个案例：

<div id="app">
    <h2>num: {{num}}</h2>
    <!--使用子组件的时候，传递num到子组件中-->
    <counter :num="num"></counter>
</div>
<script src="../vue-2.5.17.js"></script>
<script type="text/javascript">
    Vue.component("counter", {// 子组件，定义了两个按钮，点击数字num会加或减
        template:`
            <div>
                <button @click="num++">加</button>  
                <button @click="num--">减</button>  
            </div>`,
        props:['num']// count是从父组件获取的。
    })
    var app = new Vue({
        el:"#app",
        data:{
            num:0
        }
    })
</script>

子组件接收父组件的num属性
子组件定义点击按钮，点击后对num进行加或减操作

我们尝试运行：

在这里插入图片描述

好像没问题，点击按钮试试：

在这里插入图片描述

子组件接收到父组件属性后，默认是不允许修改的。怎么办？

既然只有父组件能修改，那么加和减的操作一定是放在父组件：

var app = new Vue({
    el:"#app",
    data:{
        num:0
    },
    methods:{ // 父组件中定义操作num的方法
        increment(){
            this.num++;
        },
        decrement(){
            this.num--;
        }
    }
})

但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？

我们可以通过v-on指令将父组件的函数绑定到子组件上：

<div id="app">
    <h2>num: {{num}}</h2>
    <counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>

然后，当子组件中按钮被点击时，调用绑定的函数：

Vue.component("counter", {
    template:`
<div>
<button @click="plus">加</button>
<button @click="reduce">减</button>  
</div>`,
    props:['count'],
    methods:{
        plus(){
            this.$emit("inc");
        },
        reduce(){
            this.$emit("dec");
        }
    }
})

vue提供了一个内置的this.$emit函数，用来调用父组件绑定的函数

效果：子组件抛的下述错误忽略

在这里插入图片描述

2. 子向父通信-调用父的有参方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-2.5.17.js"></script>
</head>
<body>
<div id="app">
    outNum:{{outNum}}<br>

    <counter @outshow="mainshow"></counter>
</div>
<script>
Vue.component("counter",{
    template:`<button @click="show(10)">show</button>`,
    methods:{
        show(num){
            this.$emit("outshow",num)
        }
    }
})


var vm = new Vue({
    el:"#app",
    data:{
        outNum:''
    },
    methods:{
        mainshow(myoutnum){
            this.outNum = myoutnum
        }
    }

});
</script>

</body>
</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}$/, //不连续的两位字母// /^