vue组件及组件通信/动态组件

组件

组件命名

• 组件文件使用大驼峰命名
• 注册/命名组件时使用大驼峰命名
• 组件标签使用中横线命名

命名语义化

• 使用复数形式表示列表型组件,使用单数形式表示非列表型组件
• 基础组件
  • 展示类、无逻辑或无状态的基础组件通常以特定前缀开头，如 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>