组件
组件命名
- 组件文件使用大驼峰命名
- 注册/命名组件时使用大驼峰命名
- 组件标签使用中横线命名
命名语义化
- 使用复数形式表示列表型组件,使用单数形式表示非列表型组件
- 基础组件
- 展示类、无逻辑或无状态的基础组件通常以特定前缀开头,如 Base, App, 或 V。例如:BaseButton, BaseInput, VIcon
- 单例组件
- 只应有一个活跃实例的组件,可以以 The 作为前缀,以示其唯一性。例如:TheModal, TheSidebar
- 紧密耦合的子组件
- 与某个父组件紧密相关的子组件,可以以其父组件名作为前缀。例如,父组件 TodoList 的子组件可以命名为 TodoListItem,子组件的子组件可以是 TodoListItemButton
- 单词顺序
- 从一般到具体:组件名应以高级别的、一般化的描述性单词开头,以更具体的描述性修饰词结尾。例如:SearchButtonClear, SearchButtonRun
组件注册
全局注册
Vue.component('my-component')
局部注册
export default {
components: {
'my-component': MyComponent
'my-component2': MyComponent2
}
}
组件通信
父传子
通过自定义props传递数据
<my-component msg="hello"></my-component>
// 子组件
export default {
props: {
msg: String
num: Number
}
}
$attrs
它是一个对象,包含了父组件传递给子组件的,没有子组件props中显式声明的属性。
- 将未知的属性或未绑定的属性从父组件传递到子组件
// 父组件
<children-component :msg="msg"></children-component >
// 子组件
<div v-bind="$attrs"></div>
子传父
this.$emit
发布一个自定义事件
this.$emit('eventName', [arg1, arg2, ...]);
this.$on
this.$on('eventName', listenerFunction);
- eventName 是事件名称,通常是一个字符串。
- listenerFunction 是一个函数,当事件被触发时会被调用。
this.$off
# this.$on
移除一个自定义事件监听器。
this.$off('eventName');
子传父的方式
通过自定义事件触发
子组件内定义事件回调函数,里面发布一个事件,可以传递参数
<div @click="handleClick(age)"></div>
export default {
methods: {
handleClick(e, age) {
console.log(e)
this.$emit('childEvent', age)
}
}
}
// 父组件中在子组件标签上自定义一个事件,订阅该事件,并在父组件destroyed生命周期中取消订阅
<child @click="handleClick"></child>
export default {
methods: {
handleClick(e,age) {
console.log(e,age)
this.$on('childEvent', age)
}
},
beforeDestroy() {
this.$off('childEvent')
}
.sync
.sync修饰符是Vue.js提供的一个语法糖,用于简化父子组件之间双向绑定数据的操作。实际上是对v-bind和v-on的组合使用,让子组件可以直接修改父组件中的数据
- 用.sync修饰符时,你需要在子组件中的props中接受一个与父组件的属性名相同的属性,并且在更新该属性时,使用$emit触发一个名为update:属性名的事件。这样,当子组件中的属性值发生变化时,父组件中的对应值也会进行更新
<template>
<child-component :value.sync="parentValue"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentValue: 'Initial value'
};
}
}
</script>
// 子组件内
// 子组件内,在子组件中,你需要声明value作为prop,并在需要更新该值时,使用$emit触发update:value事件
// 在这个例子中,当点击按钮时,子组件会触发update:value事件,并传递一个新的值给父组件。父组件中的parentValue数据属性会随之更新
<template>
<button @click="incrementValue">Increment</button>
</template>
<script>
export default {
props: ['value'],
methods: {
incrementValue() {
this.$emit('update:value', this.value + 1);
}
}
}
</script>
兄弟组件通信
eventBus
步骤:
- 创建eventbus
const eventBus = new Vue()
export default eventBus
- 在需要通信的组件中,注册事件
<!-- 组件A -->
<template>
<button @click="sendToAnyComponent">Send to Any Component</button>
</template>
<script>
import { EventBus } from './event-bus.js';
export default {
methods: {
sendToAnyComponent() {
EventBus.$emit('global-event', { message: 'Sent from any component' });
},
},
};
</script>
- 接收方订阅事件、解除事件
<!-- 组件B -->
<template>
<div>{{ receivedData.message }}</div>
</template>
<script>
import { EventBus } from './event-bus.js';
export default {
data() {
return {
receivedData: {},
};
},
created() {
EventBus.$on('global-event', (data) => {
this.receivedData = data;
});
},
beforeDestroy() {
EventBus.$off('global-event');
},
};
</script>
使用vuex
全局混入 (Global Mixins)
localStorage&sessionStorage
localStorage.setItem('key', 'value');
localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();
其他涉及组件间关联的内容
v-on=“$listeners”
对子组件设置v-on="$listeners"后,父组件的所有事件监听器都将直接绑定到子组件上
$parent
访问根实例: 在每个 new Vue 实例的子组件中,其根实例可以通过 $root property 进行访问
// 获取根组件的数据
this.$root.foo
// 写入根组件的数据
this.$root.foo = 2
// 访问根组件的计算属性
this.$root.bar
// 调用根组件的方法
this.$root.baz()
$children
访问子组件实例: 在每个 new Vue 实例中,$children property 是一个数组,包含了所有的子组件实例
$refs
访问子组件实例或子元素
<base-input ref="usernameInput"></base-input>
methods: {
// 用来从父级组件聚焦输入框
focus: function () {
this.$refs.usernameInput.focus()
}
}
$parent
访问父组件实例,可以用来从一个子组件访问父组件的实例。它提供了一种机会,可以在后期随时触达父级组件,以替代将数据以 prop 的方式传入子组件的方
动态组件
可以根据数据动态改变渲染的组件,通过v-bind:is 指定组件名称,改变其值,即改变展示的组件
<div id="app">
<component :is="currentComponent"></component>
</div>
<script>
export default {
data() {
return {
currentComponent: 'component-a'
};
}
};
Vue.component('component-a', ComponentA);
Vue.component('component-b', ComponentB);
</script>