vue学习（十一）父子组件间传值

淡淡的烟草味﹌ 2022-04-22 12:12 338阅读 0赞

1，示例代码

<table> 
 <tbody> 
  <tr> 
   <td> <pre>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
       &lt;counter :count="count1" @recall="recallMethod"&gt;&lt;/counter&gt;
        &lt;counter :count="count2" @recall="recallMethod"&gt;&lt;/counter&gt;

&lt;div&gt;{
      {total}}&lt;/div&gt;
    &lt;/div&gt;

&lt;script&gt;

Vue.component('counter',{
           template:'&lt;div @click="handleclick"&gt;{
      {number}}&lt;/div&gt;',
            props:['count'],
            data:function () {
                return {
                    number:this.count
                }
            },
            methods:{
                handleclick:function () {
                    this.number++;
                    this.$emit('recall',1)
                }
            }
        })

var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                total:0,
                count1:0,
                count2:0
            },
            methods:{
                recallMethod:function (value) {
                   this.total+=value
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre> </td> 
  </tr> 
 </tbody> 
</table>

2，注意，父组件创给子组件的值，子组件不能修改，这是由于vue中有一个单项数据流的概念，所以在子组件中用number接受count，然后通过修改number来打到目的

发表评论取消回复

表情：

评论列表（有 0 条评论，338人围观）

还没有评论，来说两句吧...

相关阅读

相关 [vue] 父子组件间传值

境说明: vue 3.x + ant-vue 父组件(Album.vue)使用: <template> <div> <a-butt...

「爱情、让人受尽委屈。」/ 2024年04月17日 20:25/ 0 赞/ 166 阅读

相关 vue 父子组件传值

父子组件传值最常用的方法（4种） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

比眉伴天荒/ 2023年01月16日 02:43/ 0 赞/ 440 阅读

相关 Vue父子组件间传值之 $parent/$children

示例一：父组件向子组件传值父组件： <template> <div> <h1>父组件</h1> <h-chi

亦凉/ 2022年12月22日 11:29/ 0 赞/ 266 阅读

相关 Vue - 组件传值（父子组件间传值、非父子组件间传值）

推荐：[Vue汇总][Vue] Vue - 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue

我就是我/ 2022年12月21日 11:00/ 0 赞/ 462 阅读

相关 Vue父子组件间传值之 props/$emit

示例一：父组件向子组件传值及方法定义父组件： <template> <div> <h2> { {msg}}</

阳光穿透心脏的1/2处/ 2022年12月20日 13:59/ 0 赞/ 289 阅读

相关 vue父子组件间传值

子组件 <template> <div class="confirm_button"> <el-button type="primar

你的名字/ 2022年10月02日 11:50/ 0 赞/ 402 阅读

相关 vue父子组件传值

作者：小小字符链接：https://www.jianshu.com/p/4f2c0acedb04 來源：简书 1.前言组件是Vue.js最推

悠悠/ 2022年05月27日 10:50/ 0 赞/ 427 阅读

相关 vue学习（十一）父子组件间传值

1，示例代码 <table> <tbody> <tr> <td> <pre><!DOCTYPE html> <html lang="en"

淡淡的烟草味﹌/ 2022年04月22日 12:12/ 0 赞/ 339 阅读

相关 Vue父子组件传值

Vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot 通过props来传值：静态传值就是直接通过props来传递动态传值是通

Dear 丶/ 2022年01月22日 15:15/ 0 赞/ 492 阅读

相关 vue父子组件传值

父组件 <template> <div> <h1>我是父组件</h1> <hello :msg="ad

小咪咪/ 2021年09月17日 02:04/ 0 赞/ 635 阅读