《vue语法篇》基础语法

ref和$ref

在Vue中，$ref是一个特殊的属性，它允许您引用组件或DOM元素。可以使用$ref属性在组件或元素上绑定一个唯一的标识符，然后在Vue实例中使用$ref来访问该组件或元素。类似于id选择器。

例如，假设您有一个组件：

点击查看代码

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus();
    },
  },
};
</script>

在上面的组件中，我们有一个输入框和一个按钮，点击按钮将调用focusInput()方法来将焦点设置到输入框。我们使用了ref="myInput"属性，这意味着我们可以在Vue实例中使用this.$refs.myInput来引用输入框元素。

$refs属性可以引用带有ref属性的组件或元素。但是，应该谨慎使用$refs，以避免破坏Vue的响应性能。在大多数情况下，最好使用props和事件来实现组件之间的通信。

props

在Vue.js中，props是一种向子组件传递数据的方式。将props添加到子组件中，可以在父组件中传递数据到子组件。这样就可以实现组件之间的数据通信。

可以在子组件中定义一个props，然后在父级组件中通过v-bind指令将数据传递给子组件。在子组件中，可以通过props属性来获取数据。

例如，一个名为HelloWorld的子组件可以定义如下的props：

Vue.component('HelloWorld', {
  props: {
	message: String
  },
  template: '<div>{{ message }}</div>'
})

这里定义了一个名为message的props，它的类型是String。在子组件的模板中，使用{{ message }}展示prop传递的数据。

在父级组件中，可以通过v-bind指令将数据传递给子组件：

<HelloWorld message="Hello, World!"></HelloWorld>

这样，父级组件就会将一个名为message，值为“Hello, World!”的prop传递给子组件。子组件会将这个值渲染到模板中，显示出“Hello, World!”这个文本。我们也可以用v-bind来动态绑定message的值：

<HelloWorld v-bind:message="parentMessage"></HelloWorld>

这里的parentMessage是父级组件的一个数据属性。通过v-bind指令动态绑定message的值，可以实现动态更新子组件的数据。

总的来说，props是一种很实用的组件通信方式，它可以让Vue.js中的组件之间更灵活地传递数据。

$emit和$on

$emit

在Vue.js中，$emit是一种自定义事件的机制，用于在子组件中触发事件并向父级组件传递数据。

使用$emit，可以在子组件中触发一个自定义事件，并传递一些数据给父级组件。在父级组件中，可以使用@监听子组件的自定义事件，然后执行相应的操作。

具体使用方法如下：

首先，在子组件内部定义一个方法，用于触发自定义事件：

methods: {
  handleClick() {
	this.$emit('customEvent', 'Some data')
  }
}

这里，handleClick方法通过this.$emit('customEvent', 'Some data')触发一个名为customEvent的事件，并将数据“Some data”作为参数传递给该事件。

然后，在父级组件中，使用@监听子组件的自定义事件，并执行相应的操作：

<my-component @customEvent="handleCustomEvent"></my-component>

methods: {
  handleCustomEvent(data) {
	console.log(data) // 输出 Some data
  }
}

这里，在父级组件的模板中使用@监听子组件的自定义事件customEvent，并将其绑定到handleCustomEvent方法上。

当子组件触发customEvent事件时，触发handleCustomEvent方法，并传递数据“Some data”，这时，handleCustomEvent方法可以对数据进行处理。

总的来说，$emit机制可以实现自定义事件的触发和监听，方便组件之间的数据传递和通信。在实际开发中，$emit常用于复杂组件的交互，实现组件间的数据共享与通信。

在Vue.js中，$on是一种自定义事件的监听机制，用于监听组件内部或父级组件中发出的事件。

$on

$on方法主要用于监听自定义事件。通过$on方法在组件内部或父级组件中监听特定的自定义事件，当事件被触发时，就会执行相应的回调函数。

例如，在组件内部定义一个名为customEvent的自定义事件：

methods: {
  handleClick() {
	this.$emit('customEvent', 'Some data')
  }
}

在Vue实例中，通过$on来监听该自定义事件：

created() {
  this.$on('customEvent', function(data){
	console.log('Custom event triggered with data:', data)
  })
}

这里通过created钩子函数，在Vue实例中定义一个$on方法，用于监听名为customEvent的自定义事件。当这个事件被触发时，会执行回调函数，并打印出事件的数据。

注意，$on方法要放在组件或实例的生命周期钩子函数中，才能被正确实例化和监听。

总而言之，$on方法可以监听自定义事件，并在事件触发时执行相应的回调函数。它非常有用于处理组件之间的通信，特别是在复杂组件应用中，可以用来实现不同组件之间的数据传递和状态管理。