VUE学习笔记（五）

1. 父子组件传值

   1.1 父组件向子组件传值

         通过 props 属性接收父组件传过来的值，props属性是只读的。

    var vm = new Vue({
          el: '#app',
          data() {
              return {
                msg: '123'
              }
          },
          components: {
              com1: {
                  template: '<h1>这是父组件的值 --- {{ parentMsg }}</h1>',
                  // 父组件传递过来的 parentMsg 属性，先在props中定义一下，才能在子组件中使用，props中的属性是只读的 
                  props: ['parentMsg']
              }
          }
      })

    <div id="app">
        <com1 :parent-msg='msg'></com1>
    </div>

 

1.2 子组件通过事件调用向父组件传值（子传父：$emit）

    var vm = new Vue({
          el: '#app',
          data() {
              return {
                dataFromSon: null
              }
          },
          methods: {
              show(data) {
                  console.log(`调用了父组件的方法, 名字：${data.name}，年龄：${data.age}`);
                  this.dataFromSon = data;
              }
          },
          components: {
              com2: {
                  template: '#tmp',
                  data() {
                      return {
                          msg: { name: '张三', age: 10 }
                      }
                  },
                  methods: {
                    sonClick() {
                        this.$emit('func', this.msg);
                    }
                  }
              }
          }
      })

 

    <div id="app">
        <com2 @func='show'></com2>
    </div>
    <template id="tmp">
        <div>
            <h3>这是子组件</h3>
            <input type="button" value="我是子组件的按钮，点击触发父组件方法" @click='sonClick'>
        </div>
    </template>

2. 使用 ref 获取DOM元素和组件

 vue可以给标签或组件设置ref属性值，然后调用this.$refs.属性名，就可以拿到DOM元素或组件

    var login = Vue.component('login', {
            template: '<h1>子组件</h1>',
            data() {
                return {
                    msg: 'son msg'
                }
            },
            methods: {
                show() {
                    console.log('调用了子组件的方法')
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            methods: {
                getElement() {
                    console.log(this.$refs.myh3.innerText);
                    console.log(this.$refs.myBtn.value);
                    console.log(this.$refs.mylogin.msg);
                    this.$refs.mylogin.show();
                }
            },
        })

    <div id="app">
        <input type="button" value="获取DOM元素" @click='getElement' ref='myBtn'>
        <h3 id="myh3" ref='myh3'>哈哈哈</h3>
        <login ref='mylogin'></login>
    </div>