Vue父子组件传值的Demo「建议收藏」

全栈程序员站长

发布于 2022-08-27 13:10:20

3090

大家好，又见面了，我是你们的朋友全栈君。

话不多说，直接上代码

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/145767.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月1，如有侵权请联系 cloudcommunity@tencent.com 删除

java