vue学习笔记


子组件获取父组件数据

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>父组件向子组件通讯title>
head>

<body>
  <div id="app">
    <father>father>
  div>

  <template id="father">
    
    <div>
      {{fatherData}}
      
      <son :fatherdata='fatherData'>son>
      
      
    div>
  template>
  <template id="son">
    <div>
      {{sondata}} - {{fatherdata}}
    div>
  template>
  <script src="js/vue.js">script>
  <script>
    let vm = new Vue({
      el: '#app',
      components: {
        'father': {
          template: '#father',
          data() {
            return {
              fatherData: '我是父组件数据',
            }
          },
          components: {
            'son': {
              template: '#son',
              data() {
                return {
                  sondata: '我是子组件数据',
                }
              },
              props: ['fatherdata'],
              // 连字符对应修改成驼峰 
              // props: ['fatherData'],
            }
          }
        },
      }
    })
  script>
body>

html>

运行结果:

父组件获取子组件数据 

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>子组件向父组件通讯title>
head>
<body>
  <div id="app">
    <father>father>
  div>
  
  <template id="father">
    <div>
      {{fatherData}} - {{sonData}}
      
      <son @getsondata='getSonData'>son>
    div>
  template>

  <template id="son">
    <div>
      {{sonData}}
    div>
  template>
  <script src="js/vue.js">script>
  <script>
      let vm = new Vue({
        el: '#app',
        components: {
          'father': {
            template: '#father',
            data() {
              return {
                fatherData: '我是父组件数据',
                sonData: '',
              }
            },
            methods: {
              getSonData(value) {
                this.sonData = value;
              }
            },
            components: {
              'son': {
                template: '#son',
                data() {
                  return {
                    sonData: '我是子组件数据'
                  }
                },
                mounted() {
                  // 通过this.$emit()发送数据
                  this.$emit('getsondata',this.sonData)
                }
              }
            }

          }
        }
      });
  
  script>
body>
html>

 运行结果:

兄弟组件互传数据 

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>兄弟组件的通讯title>
head>
<body>
  <div id="app">
    <component1>component1>
    <component2>component2>
  div>

  <template id="mylarge">
    <div>
      {{mylarge}} - {{mysmall}}
      <button @click='largeTosmall'>将哥哥数据传给弟弟button>
    div>
  template>
  
  <template id="mysmall">
    <div>
      {{mysmall}} - {{mylarge}}
      <button @click='smallTolarge'>将弟弟数据传给哥哥button>
    div>
  template>
  <script src="js/vue.js">script>
  <script>
    // 借用一个空的vue对象,进行兄弟组件间的数据通讯
    let event = new Vue({});
    let vm = new Vue({
      el: '#app',
      components: {
        'component1': {
          template: '#mylarge',
          data() {
            return {
              mylarge: '我是哥哥的数据',
              mysmall: ''
            }
          },
          mounted() {
            event.$on('getmysmalldata',value=> {
              this.mysmall = value;
            })
          },
          methods: {
            largeTosmall() {
              event.$emit('getmylargedata',this.mylarge);
            }
          }
        },
        'component2': {
          template: '#mysmall',
          data() {
            return {
              mysmall: '我是弟弟的数据',
              mylarge: ''
            }
          },
          mounted() {
            event.$on('getmylargedata',value=> {
              this.mylarge = value;
            })
          },
          methods: {
            smallTolarge() {
              event.$emit('getmysmalldata',this.mysmall);
            }
          }
        }
      }
    });
  script>
body>
html>

运行结果:

--------

-------

未完,待续...

相关