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

最新推荐文章于 2024-01-28 21:17:33 发布

好奇的嫣朵拉

最新推荐文章于 2024-01-28 21:17:33 发布

阅读量4.6k

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41234832/article/details/84940671

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

好奇的嫣朵拉

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
【必看】Vue如何通过子组件向父组件传值？子组件的参数如何传到父组件？

1.子向父的通信–调用父的无参方法结论：子组件是无法直接改变父组件的数据的，只能通过父组件改变他自己的数据来看这样的一个案例：&lt;div id="app"&gt; &lt;h2&gt;num: {{num}}&lt;/h2&gt; &lt;!--使用子组件的时候，传递num到子组件中--&gt; &lt;counter :num="num"&gt;&a
复制链接

扫一扫