Vue框架学习（六）

一、实例属性

实例属性是指 Vue 实例对象的属性，如vm.$data就是一个实例属性，本节主要学习 Vue 中一些其他常用的实例属性的使用。

1、vm.$props

使用vm.$props属性可以接收上级组件向下传递的数据。

示例代码如下：

  <div id="app">
    <!-- 父组件 -->
    <my-parent></my-parent>
  </div>

  <!-- 父组件模板 -->
  <template id="parent">
    <div>
      <h3>手机信息搜索</h3>
      <!-- 此 input文本框 通过 v-model 指令绑定 brand 值，数据双向绑定 -->
      手机品牌：<input type="text" v-model="brand">
      <!-- 子组件 -->
      <my-child v-bind:name="brand"></my-child>
    </div>
  </template>

  <!-- 子组件模板 -->
  <template id="child">
    <ul>
      <li>手机品牌：{{show.brand}}</li>
      <li>手机型号：{{show.type}}</li>
      <li>市场价格：{{show.price}}</li>
    </ul>
  </template>

  <script>
    // 注册父组件
    Vue.component('my-parent', {
      template: '#parent',
      data () {
        return {
          brand: ''
        }
      }
    })
    // 注册子组件
    Vue.component('my-child', {
      template: '#child',
      data () {
        return {
          // 对象数组content
          content: [
            {brand: '华为', type: 'Mate20', price: 3699},
            {brand: '苹果', type: 'iPhone7', price: 2949},
            {brand: '三星', type: 'Galaxy S8+', price: 3299},
            {brand: 'vivo', type: 'Z5x', price: 1698},
            {brand: '一加', type: 'OnePlus7', price: 2999},
            {brand: '360', type: 'N7 Pro', price: 1099},
            {brand: 'oppo', type: 'Reno', price: 2599}
          ],
          show: {brand: '', type: '', price: ''}
        }
      },
      // 通过 props 接收父组件传来的 name 属性，该属性保存的是手机品牌 brand
      props: ['name'],
      watch: {
        name () {
          if (this.$props.name) {
            var found = false
            this.content.forEach((value, index) => {
              if (value.brand === this.$props.name) {
                found = value
              }
            })
            this.show = found ? found : {brand: '', type: '', price: ''}
          } else {
          return
        }
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {}
    })
 </script>

2、vm.$options

Vue 实例在初始化时，还可以传入自定义的选项。其类型可以是数组、对象、函数等，通过vm.$options来获取。

示例代码如下：

  <div id="app">
    <p>{{base}}</p>
    <p>{{noBase}}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      // 自定义数据，它不具有响应特性
      customOption: '我是自定义数据',
      data: {
        base: '我是基础数据' 
      },
      // created钩子函数
      created () {
        // 获取customOption自定义数据，然后将其赋值给实例对象的noBase响应属性
        this.noBase = this.$options.customOption
      }
    })
 </script>

3、vm.$el

vm.$el用来访问 vm 实例使用的根DOM元素。

示例代码如下：

  <div id="app">
    <p>我是根标签结构</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app'
    })
    console.log(vm.$el)
    // 将 vm 实例绑定的 DOM 元素的 innerHTML 属性修改为新的内容
    vm.$el.innerHTML = '<div>我是替换后的div标签</div>'
  </script>

4、vm.$children

vm.$children用来获取当前实例的直接子组件。注意，vm.$children并不保证顺序，也不是响应式的。

示例代码如下：

  <div id="app">
    <!-- 为button绑定单击事件 -->
    <button @click="child">查看子组件</button>
    <my-component></my-component>
  </div>

  <script>
    // 注册自定义组件my-component
    Vue.component('my-component', {
      template: '<div>myComponent</div>'
    })
    var vm = new Vue({
      el: '#app',
      methods: {
        child () {
          // 控制台输出this.$children
          console.log(this.$children)
        }
      }
    })
  </script>

5、vm.$root

vm.$root用于获取当前组件树的根 Vue 实例，如果当前实例没有父实例，则获取到的是当前实例本身。

示例代码如下：

  <div id="app">
    <my-component></my-component>
  </div>
  <script>
    Vue.component('my-component', {
      template: '<button @click="root">查看根实例</button>',
      methods: {
        root () {
          // 控制台输出this.$root
          console.log(this.$root)
          // 判断this.$root和vm.$root是否为同一个实例对象
          console.log(this.$root === vm.$root)
        }
      }
    })
    var vm = new Vue({ el: '#app' })
  </script>

6、vm.$slots

插槽(slots)，就是定义在组件内部的template模板，可以通过$slots动态获取。

    <div id="app">
        <my-component>你好
            <template v-slot:second>
                <div>内部结构</div>
            </template>
        </my-component>
    </div>

    <template id="first">
        <div>
            <!-- 启用插槽slots -->
            <slot></slot>
            <!-- 当有多个插槽时，可以为插槽命名 -->
            <slot name="second"></slot>
        </div>
    </template>
    <script>
        Vue.component('my-component', {
            template: '#first'
        })
        var vm = new Vue({
            el: '#app'
        })
        // 在控制台查看插槽内容
        console.log(vm.$children[0].$slots.second[0].children[0].text)
    </script>

7、vm.$attrs

vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性。

    <div id="app">
        <!-- 为<my-component>组件设置 id 属性 -->
        <my-component id="test"></my-component>
    </div>

    <script>
        // 注册<my-component>组件
        Vue.component('my-component', {
            template: '<button @click="showAttrs">查看属性</button>',
            methods: {
                showAttrs() {
                	// 控制台输出this.$attrs属性
                    console.log(this.$attrs)
                }
            }
        })
        var vm = new Vue({
            el: '#app'
        })
    </script>

参考资料：
1、《Vue.js 前端开发实战》，黑马程序员.
2、Vue 2.x 官方API文档. (https://cn.vuejs.org/v2/api/)