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}}
      <!-- 这里有个坑， :fatherdata需要全部小写,因为解析的时候，会解析成小写 -->
      <son :fatherdata='fatherData'></son>
      <!-- 或者采用连接符，但props中需要写成驼峰形式 -->
      <!-- <son :father-data='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>

运行结果：

--------

-------

未完，待续...