vue学习之路 - 5.进阶（vue组件）

vue 组件

组件概念

         Vue中的组件思想借鉴自React

　　　　■ 目前的主流前段框架：Angular、Vue、React都是组件化开发思想

　　　　■ 组件是对局部视图的封装

　　　　　　◆ HTML结构

　　　　　　◆ CSS样式

　　　　　　◆ Java Script行为

　　　　　　　　● data数据

　　　　　　　　● methods行为

　　作用：提高开发效率，增强可维护性，享受编程的乐趣。

　　初始 vue 组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue 组件初识</title>
</head>
<body>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    // 定义名为 todo-item 的新组件
    Vue.component('todo-item', {
      template: '<li>这是个待办项</li>'
    })
  </script>

  <!-- 在实例中引用组件 -->
  <div id="app">
    <!-- 组件使用：上面定义的 todo-item 组件,可以在 vue 模板中使用 -->
    <todo-item></todo-item>
  </div>

  <script>
    // 得到 Vue 实例
    const app = new Vue({
      el: '#app'
  });
  </script>
</body>
</html>
组件初识 Demo

　　vue中组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <todo-item>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。

　　注意：组件的名称不要使用HTML原生的标签名称

　　组件的一般使用：

组件的使用

全局注册

　　我们一般把网页中特殊的公共部分注册为全局组件：轮播图、tab选项卡、分页、通用导航

　　注册：

 　   组件初识的那个Demo ，为了方便演示，让大家先初步的了解组件，所以用的也是全局注册的组件。

    // 全局组件的注册
    Vue.component('todo-item', {
      template: '<li>这是个待办项</li>'
    })

　　使用:

  <!-- 在 vue 控制的模板中引用组件 -->
  <div id="app">
    <todo-item></todo-item>
  </div>

局部注册（子组件）

　　局部注册一般是注册一些非通用，只适用于当前项目或者某个模块的组件。

　　注册：

  <script>
    // 定义一个局部组件内容
    var childComponent = {
      template : '<div>我是局部组件的内容</div>'
    }

    // 在 vue 实例中或者在组件中声明这个局部组件，这个局部组件才能被 vue 实例或者其他组件使用。
    const app = new Vue({
      el: '#app',
      components : {
        // <my-local-component> 将只在父组件模板中可用
        'my-local-component' : childComponent
      }
  });
  </script>

 

　　使用：

  <!-- 在 vue 控制的模板中使用组件 -->
  <div id="app">
    <my-local-component><my-local-component>
  </div>

 

组件与组件之间是相互独立的

　　默认情况下，组件与组件之间无法进行跨组件数据访问，子组件只能被上一层的父组件所调用。

　　　　■ 组件就是一种特殊的Vue实例，不需要实例化，它管理自己的template

　　　　■ 在组件中，也可以配置自己的类似于Vue实例中的一些选项资源：data、methods、computed

　　思想：组件自己管理自己，不影响别人。

 

　　局部组件之间调用原则：

　　　　■ 只能是父组件可以调用子组件，孙组件无法调用。

　　　　■ 子孙组件都无法调用父组件。

　　　　■ 兄弟节点组件也无法相互调用。

　　组件的data必须是函数

　　组件中的data必须是函数（手动new出来的Vue实例还是普通对象）

　　　　■ 函数内部返回一个对象

　　如：

  <script>
    var template = '';
    window.AppComponent = {
      template,   //模板内容
      data (){
        return {
          message : '组件的数据绑定'
        }
      } 
    }
  </script>

 

组件使用注意事项：

组件可以理解为特殊的Vue实例，管理自己的template模板

■ 组件的template必须有且只有一个根节点

■ 组件与组件之间是相互独立的，可以有自己的data、methods、computed…

■ 组件的data必须是函数

■ 组件名和组件js尽量使用大写开头的名字，普通js使用小写

父子组件通信：

父亲给孩子：  Props Down

1、现在父组件中往子组件标签上添加属性的方式来传递数据

2、然后在子组件中声明props来接收父组件传递的数据。

3、然后在子组件中就可以通过this来访问props中的数据了。

 

注意：单向数据流

Props是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

 

// 传递普通数据类型：父组件修改了，子组件也会受到影响

// 传递引用数据类型：父组件中无论是修改了还是重新赋值都会受到影响。

 

// 子组件中，无论父组件传下来的是普通数据类型还是引用类型，都不能进行重新赋值。

   但是引用类型的数据可以 修改 。

// 如果你想要拿父组件中的数据，又不想影响父组件，那么建议在子组件中定义局部变量存值来进行操作。

孩子通知父亲：Events Up

1、  子组件在内部通过this.$emit(自定义事件名称[,可选传参])发布事件

2、  父组件在使用子组件的标签上通过@自定义事件名称=”事件处理函数”的方式来订阅子组件内部发布的事件

3、  这样的话，当子组件内部this.$emit的时候，则父组件订阅的自定义事件就会执行。

 

组件之间通讯

posted on 2019-08-07 07:39  明七五  阅读(169)  评论(0)    收藏  举报

导航