做网站素材/游戏推广工作好做吗

一、什么是组件

组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可

组件化和模块化的不同：

• 模块化：是从代码逻辑的角度进行划分的
• 组件化：是从UI界面的角度进行划分的

二、全局组件定义的三种方式

1. 使用Vue.extend配合Vue.component方法

  <div id="app"><!-- 3.使用组件，组件必须挂载在某个vue实例下，否则它不会生效 --><mycom></mycom></div><script>// 1.创建组件构造器const com = Vue.extend({template: '<h3>这是使用Vue.extend创建的组件</h3>'})// 2.注册组件Vue.component('mycom', com)// 也可以合并来写// Vue.component('mycom', Vue.extend({//   template: '<h3>这是使用Vue.extend创建的组件</h3>'// }))var vm = new Vue({el: '#app'})</script>

Vue.extend():

• 调用该方法创建的是一个组件构造器
• 通常在创建组件构造器时，传入template代表我们自定义组件的模板，该模板就是在使用到组件的地方要显示的HTML代码
• 事实上，这种写法在vue2.x的文档中几乎已经看不到了

Vue.component()：

• 调用该方法将刚才的组件构造器注册为一个组件，并给它起一个组件的标签名称
• 所以需要传递两个参数：1、注册组件的标签名 2、组件构造器
• 注意：如果定义全局组件时，组件标签名使用了驼峰命名，则在引用组件时，需要把大写的驼峰改为小写的字母，同时，两个单词之间使用 - 连接

2. 直接使用Vue.component方法

    Vue.component('mycom',{template: '<h3>这是直接使用Vue.component创建的组件</h3>'})

这是一种比较方便的写法，实际内部还是会调用extend方法

3. 组件模板的分离写法

  <template id="com"><div><h2>这是使用template标签定义的组件</h2></div></template><script>var vm = new Vue({el: '#app',components:{'mycom':{template:'#com'}}})</script>

三、局部组件

全局组件可以在任意vue实例下使用，如果我们注册的组件是挂载在某个实例中，那么它就是一个局部组件

   var vm = new Vue({el: '#app',components:{'mycom':com}})

四、父子组件通信

子组件是不能引用父组件或者vue实例的数据的，但是在开发中一些数据确实需要从上层传递到下层。比如在一个页面中，我们从服务器请求到了大量数据，其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）

1. 父组件–>子组件

  <div id="app"><!-- 3.父组件可以在引用子组件的时候通过属性绑定(v-bind:)的形式，把需要传递给子组件的数据，以数据绑定的形式，传递到子组件内部，供子组件使用 --><mycom :cmovies="movies"></mycom></div><template id="com"><div><ul><!-- 4.上面已经把子组件的数据绑定到cmovies中，这里可以使用 --><li v-for="movie in cmovies">{{movie}}</li></ul></div></template><script>var vm = new Vue({el: '#app',// 1.父组件中的数据(这里把根组件看成父组件)data: {movies: ['aaa', 'bbb', 'ccc'],},components: {'mycom': {template: '#com',// 2.使用pros声明从父组件接收到的数据props: ['cmovies']},}})</script>

props的值有两种方式：

• 字符串数组，数组中的字符串就是传递的名称
• 对象，对象可以设置传递时的类型（type），也可以设置默认值（default）以及必传值（required），类型是对象或者数组时，默认值必须是一个函数

     props: {cmovies:{type:Array,default(){return []},required:true}}

2. 子组件–>父组件

  <div id="app"><!-- 3.父组件监听子组件的自定义事件 --><mycom @itemclick="clickOp"></mycom></div><template id="com"><div><button v-for="option in options" @click="btnClick(option)">{{option.name}}</button></div></template><script>const mycom = {template: '#com',// 1.子组件中的数据data() {return {options: [{id: 1,name: 'aaa'}, {id: 2,name: 'bbb'}, {id: 3,name: 'ccc'}]}},methods: {btnClick(option) {// 2.将自定义事件发射出去，第一个参数是自定义事件的名称，可以传递参数this.$emit('itemclick', option)}}}var vm = new Vue({el: '#app',components: {mycom},// 4.父组件处理自定义事件，对传递过来的数据进行处理methods: {clickOp(option) {console.log(option)}}})</script>

五、 父子组件访问

1.父访问子：

• 通过this.$children访问，这种方式获取到的是父组件下所有的子组件实例，一般在需要获取所有子组件实例的时候才使用这种方法，可以使用数组下标操作指定实例
• 通过this.$ref访问指定子组件实例，需要在使用子组件时声明ref属性
  例如子组件使用时为<cpn ref='aaa'></cpn>，父组件访问该组件时使用this.$ref.aaa获取该实例

2.子访问父：

通过this.$parent访问指定父组件实例

六、 插槽-slot

组件的插槽是为了让我们封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底显示什么

1.基本使用：

  <div id="app"><mycom></mycom> <mycom><button>我是拓展的内容111</button></mycom> <mycom><b>我是拓展的内容222</b></mycom> </div><template id="com"><div><h2>我是一个组件</h2><slot></slot><!-- 可以定义默认内容，如果使用组件的事件添加了内容，默认内容则不会显示 --><!-- <slot><button>我是默认内容</button></slot> --></div></template>

2.具名插槽：

当子组件的功能复杂时，子组件的插槽可能并非一个。当存在多个插槽，想要替换指定的某个插槽中的内容，使用具名插槽比较方便。

  <div id="app"><mycom><!-- 替换指定插槽中的内容 --><button slot="left">返回</button></mycom> </div><template id="com"><div><!-- 插槽中存在默认内容 --><slot name="left">左边</slot><slot name="center">中间</slot><slot name="right">右边</slot></div></template>

3.作用域插槽：

概括地说，作用域插槽是使用父组件替换插槽的标签，但是内容由子组件提供

  <div id="app"><!-- 2.我们在使用这个组件时，想要把数据以其他形式展示 --><mycom><!-- 4.父组件获取到该子组件的数据，自定义其展示方式，替换插槽 --><div slot-scope="myslot"><span v-for="item in myslot.cdata">{{item}} - </span></div></mycom> </div><template id="com"><div><!-- 3.绑定子组件中的数据到cdata关键字 --><slot :cdata="options"><!-- 1.数组在子组件中是使用列表的方式展示的 --><ui><li v-for="option in options">{{option}}</li></ui></slot></div></template><script>var vm = new Vue({el: '#app',components: {'mycom': {template: '#com',data() {return {options:['aaa','bbb','ccc']}},},}})</script>