前端扯犊子之六Vue2（二）组件

2023-11-16 14:09:52

一、组件

个人理解：为了复用代码而进行封装代码，以及封装代码块之间的通信

1、全局组件

注：(1)、table标签内只允许tr、td等，组件受限，可用is挂载。
如：tbody is="my-component"
(2)、组件内data必须是函数

<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

2、局部组件

<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
 
// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

3、组件间通信

父组件——>子组件

（1）、Props

props 是子组件用来接受父组件传递过来的数据的一个自定义属性。

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

（2）、动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件
注：对于父组件的值，可以再声明一个数据，进行赋值，避免直接操作原始数值。

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>

（3）、Props 验证

组件可以为 props 指定验证要求。

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

子组件——>父组件

父组件使用 $on(eventName) 监听事件
子组件使用 $emit(eventName) 触发事件
如果在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on

<my-component v-on:click.native="doTheThing"></my-component>

data 必须是一个函数，如果 data 是一个对象则会影响到其他实例。
组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。

<input v-model="parentData">
//等价于：

<input 
    :value="parentData"
    @input="parentData = $event.target.value"
>

非父子组件通信：兄弟组件、跨多级组件

（1）、*事件总线(bus)处理任何组件通信

首先创建了一个名为bus的空Vue实例，里面没有任何内容；然后全局定义了组件component-a;最后创建Vue实例app，在app初始化时，也就是在生命周期mounted钩子函数里监听了来自bus的事件on-message，而在组件component-a中，点击按钮会通过bus把事件on-message发出去，此时app就会接收来自bus的事件，进而在回调函数里完成自己的业务逻辑。

（2）、父链、子链

父链
在子组件中，使用this.$parent可以直接访问该组件的父实例或组件，父组件也可以通过this.$children访问它所有的子组件，而且可以递归向上或向下无限访问，直到根实例或最内层的组件。


    <div id="app">
		{{ message }}
        <component-a></component-a>
    </div>
    <script>
    	/*vue尽管允许这种操作，但是不推荐使用*/
    	Vue.component('component-a', {
    		template: '<button @click="handleEvent">通过父链直接修改数据</button>',
    		methods: {
    			handleEvent: function () {
    				//访问父链后，可以做任何操作，比如直接修改数据
    				this.$parent.message = '来自组件component-a的内容';
    			}
    		}
    	});
    	
        var app = new Vue({
 
            //选择元素
            el: "#app",
            data: {
            	message: ''
            },
        });

子链
在父组件模板中，子组件标签上使用ref指定一个名称，并在父组件内通过this.$refs来访问指定名称的子组件。

    <div id="app">
        <button @click="handleRef">通过ref获取子组件实例</button>
        <component-a ref="comA"></component-a>
    </div>
    <script>
    	Vue.component('component-a', {
    		template: '<div>子组件</div>',
    		data: function () {
    			return {
    				message: '子组件内容'
    			}
    		}
    	});
        var app = new Vue({
            el: "#app",
            methods: {
            	handleRef: function () {
            		//通过$refs来访问指定的实例
            		var msg = this.$refs.comA.message;
            		console.log(msg);
            	}
            }
        });

4、slot 分发内容

概述：
简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。
1、单个插槽(默认/匿名插槽)，在子组件中，使用特殊的元素就可以为子组件开启一个插槽，该插槽插入什么内容取决于父组件如何使用。
2、具名插槽的使用很简单，只要给 slot 元素一个 name 属性即可：,然后在父组件中使用的时候slot='myslot'
3、作用域插槽一句话总结就是：父组件替换插槽的标签，但是内容由子组件来提供。也可理解为子组件数据可以被父组件拿到。
vue2.6.0之后用法
vue 在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性，但是将会在vue3 中，被废弃的这两个，不会被支持即无效。
1、单个插槽(默认/匿名插槽)
用法：v-slot:default,可以省略不写，写上感觉和具名写法比较统一,容易理解
2、具名插槽
vue 2.6.0之后 v-slot只能用在 template上，用在 div 或 p 这种标签上是会报错的。
具名插槽缩写
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 v-slot: 替换为字符 #。
匿名插槽想用的话必须加上default
3、作用域插槽
v-slot : 插槽名称 = ' 传过来的值 '
【solt不够详细，改天再写。】
参考链接：
https://www.runoob.com/vue2/vue-tutorial.html
《vue实战》
https://blog.csdn.net/wandoumm/article/details/80167476
https://blog.csdn.net/weixin_43026567/article/details/105121899?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

码农公寓