Vue父子组件传值的Demo

最新推荐文章于 2024-01-11 15:10:38 发布

monkey_win

最新推荐文章于 2024-01-11 15:10:38 发布

阅读量343

点赞数

分类专栏：前端 Vue 文章标签：父子组件传值引用

本文链接：https://blog.csdn.net/monkey_win/article/details/81282385

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue父子组件传值</title>
    <script type="text/javascript" src="./Vue.js"></script>
</head>
<body>
    <div id="root">
        <number ref="ref1" @change="handleChange"></number>
        <number ref="ref2" @change="handleChange"></number>
        <div>{{count}}</div>
    </div>
    <script type="text/javascript">
        Vue.component('number', {
            template: "<div @click='handleNumberClick'>{{number}}</div>",
            data: function() {
                return {
                    number: 0
                }
            },
            methods: {
                handleNumberClick: function() {
                    this.number ++
                    this.$emit('change')//向父组件发送一个消息
                }
            }
        })
        var vm = new Vue({
            el: "#root",
            data: {
                count: 0
            },
            methods: {
                handleChange: function() {
                    this.count = this.$refs.ref1.number + this.$refs.ref2.number
                }
            }
        })
    </script>
</body>
</html>

monkey_win

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue父子组件传值的Demo

话不多说，直接上代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue父子组件传值&lt;/title&gt; &lt;script type="text/javascr
复制链接

扫一扫

专栏目录