父子组件 ...

零基础可复习资料整理

一 父组件向子组件传递数据   props

1 在子组件props对想要的数据进行命名

props: ['pcolor']

2 在父组件里面进行赋值

<div id="app">

<cpn :pcolor="color"></cpn>

</div>

3在模板里面进行使用

<template id="cpn">

<h2> {{pcolor}} </h2>

<template>

二 子组件向父组件传递事件    $emit

1 在子组件的methods里面添加发出事件

const  cpn = {

template: '#cpn',

methods: {

inputclick(){

$emit('inputchange')

}

}

}

2 在父组件里面绑定事件

<div id="app">

<cpn @inputchange="inputChange"></cpn>

</div>

3 在父组件的methods里面添加事件

const  app = new Vue({

    el: '#app',

methods: {

inputChange() {

 console.log(1)

}

 }

})

三 父组件访问子组件---ref     $reft

1在父组件里面添加ref

<div id="app">

<cpn ref=“aa”></cpn>

</div>

2 在父组件实例里面访问

const  app = new Vue({

el: '#app',

methods: {

btnClick(){

 console.log(this.$reft.aa.name)

}

}

})

四 父子通信

三个需求  1  子组件input输入的值跟子组件本身的data数据同步更新

                 2  子组件input输入的值跟父组件传过来的props数据同步更新

                 3  子组件data里面的dnum2的值必须是dnum1的值100倍

<body>

  <div id="app">

    <cpn :cnum1="num1" :cnum2="num2" @num1change="num1change" @num2change="num2change"></cpn>

    <h2>{{num1}}</h2>

    <h2>{{num2}}</h2>

  </div>

  <template id="cpn">

    <div>

      <h2>props：{{cnum1}}</h2>

      <h2>data：：{{dnum1}}</h2>

      <input type="text" :value="dnum1" @input="num1Input">

      <h2>props：{{cnum2}}</h2>

      <h2>data：{{dnum2}}</h2>

      <input type="text" :value="dnum2" @input="num2Input">

    </div>

  </template>

  <script src="../js/vue.js"></script>

  <script>

    const app = new Vue({

      el: '#app',

      data: {

        num1: 1,

        num2: 2

      },

      methods: {

        num1change(value) {

          this.num1 = parseFloat(value)

        },

        num2change(value) {

          this.num2 = parseFloat(value)

        }

      },

      components: {

        cpn: {

          template: '#cpn',

          props: {

            cnum1: Number,

            cnum2: Number,

          },

          data() {

            return {

              dnum1: this.cnum1,

              dnum2: this.cnum2

            }

          },

          methods: {

            num1Input(event) {

              this.dnum1 = event.target.value

              this.$emit('num1change', this.dnum1)

              this.dnum2 = this.dnum1 * 100

              this.$emit('num2change', this.dnum2)

            },

            num2Input(event) {

              this.dnum2 = event.target.value

              this.$emit('num2change', this.dnum2)

              this.dnum1 = this.dnum2 / 100;

              this.$emit('num1change', this.dnum1)

            },

          }

        },

      }

    })

  </script>

</body>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,919评论 6赞 502
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,567评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,316评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,294评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,318评论 6赞 390
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,245评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,120评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,964评论 0赞 275
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,376评论 1赞 313
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,592评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,764评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,460评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,070评论 3赞 327
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,697评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,846评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,819评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,665评论 2赞 354

推荐阅读更多精彩内容