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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值