Vue组件注册及组件传值、组件的自定义事件

记忆深处里的海

已于 2024-08-24 08:42:47 修改

阅读量190

点赞数 7

文章标签： vue.js javascript 前端

于 2024-08-23 21:00:48 首次发布

本文链接：https://blog.csdn.net/m0_49008668/article/details/141462786

版权

声明注册全局组件

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  props: ['counts'],
  methods: {
    saycounts() {
      this.$emit('saycounts','这是子组件传递的数据')
    }
  },
  template: '<button v-on:click="saycounts">You clicked me {{ counts }} times.</button>'
})




使用 Vue.extend() 方法定义组件选项，包括：

data(): 定义组件数据
template: 定义组件的 HTML 结构
methods: 定义组件的方法
computed: 定义组件的计算属性

const mycompent = Vue.extend({
  props:['message'],
  template: `<p v-on:click="sayhellow">{{message}}</p>`,
  methods: {
    sayhellow() {
      alert(this.message)
    }
  }
})

或

`//导入组件`
import MyQuanJuComponent from "./components/MyQuanJuComponent"
//声明全局组件
Vue.component("MyQuanJuComponent",MyQuanJuComponent)     //第一个参数是id，就是export中的name

声明注册局部组件

//导入局部组件
import MyJuBuComponent  from  "./components/MyJuBuComponent"
export  default {
name："App",
components:{
		//声明局部组件  (写组件的name)
	}

}

在实例内部定义

export default {
  name: 'App',
  components: {
    "child-component": {
      template: "<button @click='add2'>我是局部组件:{{md}}</button>",
      props: ['md'],
      methods: {
        add2: function () {
          this.$emit('changadd')
        }
      }
    },
  },
}

在实例外单独定义，实例内调用

var ComA = {
  template: "<div>{{word}}</div>",
  data: function () {
    return {
      word: "this is A Compotent"
    }
  }
};
var ComB = {
  template: "<div>{{word}}</div>",
  data: function () {
    return {
      word: "this is B Compotent"
    }
  }
};

        new Vue({
				el:"#app",
				components:{
					ComA,
					ComB
				}
			})

组件通信方式：

(1)父组件向子组件传值,即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。

子组件接收的父组件的值分为引用类型和普通类型两种：

　　 普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）

　　引用类型：数组（Array）、对象（Object）。

（2）二、子组件向父组件传值

1、子组件绑定一个事件，通过 this.$emit() 来触发

即：1）在子组件中绑定一个事件，并给这个事件定义一个函数。

2）在父组件中定义并绑定 handleChange 事件。

2.通过 $parent / $children 或 $refs 访问组件实例

即：这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

（3）兄弟组件之间传值

1） 通过 $emit 和 props 结合的方式

2）vuex

(4)多层父子组件通信:provide/inject

provide/inject：简单来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量，不管组件层级有多深，在父组件生效的生命周期内，这个变量就一直有效。

注：provide 和 inject 绑定并不是可响应的。即父组件的name变化后，子组件不会跟着变。

(5)组件通信之$attrs、$listeners

$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

我的理解：

接收除了props声明外的所有绑定属性（class、style除外）

图解：

由于child.vue 在 props 中声明了 name 属性，$attrs 中只有age、gender两个属性，输出结果为：

{ age: "20", gender: "man" }

另外可以在 grandson.vue 上通过 v-bind="$attrs"，可以将属性继续向下传递，让 grandson.vue 也能访问到父组件的属性，这在传递多个属性时会显得很便捷，而不用一条条的进行绑定。

如果想要添加其他属性，可继续绑定属性。但要注意的是，继续绑定的属性和 $attrs 中的属性有重复时，继续绑定的属性优先级会更高。

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

即可以理解为：

接收除了带有.native事件修饰符的所有事件监听器

parent.vue 中对 child.vue 绑定了两个事件，带有.native的 click 事件和一个自定义事件，所以在 child.vue 中，输出$listeners的结果为：

{ customEvent: fn }

同 attrs 属性一样，可以通过 v-on="$listeners"，将事件监听器继续向下传递，让 grandson.vue 访问到事件，且可以使用 $emit 触发 parent.vue 的函数。

如果想要添加其他事件监听器，可继续绑定事件。但要注意的是，继续绑定的事件和 $listeners 中的事件有重复时，不会被覆盖。当 grandson.vue 触发 customEvent 时，child.vue 和 parent.vue 的事件都会被触发，触发顺序类似于冒泡，先到 child.vue 再到 parent.vue。

总结

父子通信：父向子传递数据是通过 props，子向父是通过 $emit；通过 $parent / $children 通信；$ref 也可以访问组件实例；provide / inject ；
兄弟通信： EventBus；Vuex；
跨级通信： EventBus；Vuex；provide / inject ；$attrs / $listeners；