目次
1. プラグイン
プラグインは、Vue にグローバル機能を追加するためによく使用されます。Vue.js プラグインは、インストール メソッドを公開する必要があります。このメソッドの最初のパラメーターは Vue コンストラクターで、2 番目のパラメーターはオプションのオプション オブジェクトです。
プラグインは、グローバル メソッド Vue.use() を介して使用されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
<body>
<div id="app">
<!-- 使用插件中的过滤器 -->
{
{new Date().getTime() | fmtDate}}
<!-- 使用插件中定义的自定义指令 -->
<input type="text" v-focus>
</div>
<script>
// 1.定义一个插件
let myPlugin = {
// 插件暴露一个install方法 参数：Vue构造函数 option可选项
install(Vue,options){
// 1.1 定义全局资源 Vue.xxx
//定义一个 自定义指令
Vue.directive('focus',{
inserted(el){
el.focus()
}
});
//定义一个过滤器
Vue.filter('fmtDate', function(val){
return moment(val).format('YYYY-MM-DD')
});
//1.2 定义一个实例方法，定义在Vue的原型上 Vue.prototype.xxx
Vue.prototype.message = function(val){
console.log(val);
}
}
}
//2.使用插件
Vue.use(myPlugin)
new Vue({
el:"#app",
created(){
// 插件中在Vue原型上定义了一个方法message，因此这里可以使用message方法
this.message('请求成功！')
}
})
</script>
</body>
</html>
2.動的コンポーネント
動的コンポーネントは component タグを使用し、v-bind を使用してタグ内の is 属性をバインドし、コンポーネントを動的に切り替えます。
<component :is="current"></component>例:
対応するボタンをクリックして、対応するコンポーネントを切り替えます。
<body>
<div id="app">
<button @click="current=myA">切换A组件</button>
<button @click="current=myB">切换B组件</button>
<component :is="current"></component>
</div>
<script>
// 定义组件myA
let myA = {
template:`
<div>我是A组件</div>
`
}
// 定义组件myB
let myB = {
template:`
<div>我是B组件</div>
`
}
new Vue({
el:"#app",
// 注册组件
components:{
'my-a': myA,
'my-b': myB
},
data:{
current: myA
}
})
</script>
</body>
生き続ける
デフォルトでは、コンポーネントは切り替え時に再作成されますが、最初に作成されたときにコンポーネント インスタンスをキャッシュしたい場合があります。この問題を解決するために、その動的コンポーネントを <keep-alive> 要素でラップできます。
<keep-alive>
<component :is="current"></component>
</keep-alive>動的コンポーネントのライフサイクル
動的コンポーネントに 3 つの新しいライフサイクルが追加されました。
アクティブ化: アクティブ化コンポーネントを入力します
非アクティブ: 非アクティブのまま
errorCaptured: 子コンポーネント/子孫コンポーネントでエラー キャプチャ エラーが発生しました
トリガー シーケンス:
作成された - > errorCaptured - > マウントされた - >アクティブ化された - >非アクティブ化された
<body>
<div id="app">
<button @click="current=myA">切换A组件</button>
<button @click="current=myB">切换B组件</button>
<keep-alive>
<component :is="current"></component>
</keep-alive>
</div>
<script>
// 定义一个A的子组件,用来说明errorCaptured声明周期
let aChild={
template:`
<div>
A组件的子组件
{
{subMsg}}
</div>
`
};
// 定义组件myA
let myA = {
template:`
<div>我是A组件
<a-child></a-child>
</div>
`,
components:{
'a-child': aChild
},
created(){
alert('实例A初始化完成');
},
mounted(){
alert('实例A挂载到页面完成')
},
// 激活组件 进入组件就会触发的生命周期
activated() {
alert('进入A组件了')
},
// 捕获子组件/后代组件发生错误的生命周期
errorCaptured(){
alert('子组件发生错误了');
},
// 离开当前组件触发 停用组件
deactivated(){
alert('离开A组件了');
},
}
// 定义组件myB
let myB = {
template:`
<div>我是B组件</div>
`
}
new Vue({
el:"#app",
// 注册组件
components:{
'my-a': myA,
'my-b': myB
},
data:{
current: myA
}
})
</script>
</body>
三、混ぜて
Mixin は、Vue コンポーネントで再利用可能な機能を配布する非常に柔軟な方法を提供します。mixin オブジェクトには、任意のコンポーネント オプションを含めることができます。コンポーネントが mixin を使用する場合、mixin のすべてのオプションがコンポーネント自体のオプションに「混合」されます。
グローバルミックスイン
Vue.mixin()
グローバル登録 mix-in オブジェクトを使用することはお勧めしません。一度グローバル mix-in を使用すると、将来作成されるすべての vue インスタンスに影響します。
部分的な混入
コンポーネントインスタンスで mixin 構成アイテム mixins:[] を使用します
ミックスインのルール
コンポーネントと mixin に同じ名前のオプションがある場合、それらのオプションは適切にマージされます。
1. データ データ:
データオブジェクトが混在した場合はマージされ、競合が発生した場合はコンポーネントのデータが保持されます
2. 値は、オブジェクト メソッド、計算済みなどです。
混合すると、メソッドは 1 つのオブジェクトにマージされます。オブジェクトのキー名が競合する場合は、コンポーネント オブジェクトのキーと値のペアが保持されます。
3.ライフサイクルフック機能：
同名のフック関数は配列にマージされて順次呼び出されますが、オブジェクトに混在しているフック関数が先に呼び出されます
<body>
<div id="app">
{
{mixinMsg}}
{
{foo()}}
{
{bar()}}
</div>
<script>
// 定义一个混入对象
let myMixin = {
data(){
return{
mixinMsg: '我是混入对象的数据',
age: 18
}
},
created(){
console.log('我是混入的生命周期');
},
methods:{
foo(){
return this.age
},
bar(){
console.log('我是混入方法');
}
},
}
// 全局混入——>混入到所有组件实例
// Vue.mixin(myMixin);
new Vue({
// 局部混入
mixins: [myMixin],
el:"#app",
// 数据对象在混入时，会进行合并，发生冲突时，保留组件的数据
data:{
msg: '我是vue实例的数据模型',
age: 20
},
// 生命周期会合并并依次调用执行 混入的生命周期优先执行
created(){
console.log('我是组件的生命周期');
console.log(this.$data);
},
// 在混入时，methods会合并成为一个对象，如果对象的键名发生冲突，则保留组件对象的键值对
methods:{
bar(){
console.log('我是组件的方法');
}
}
})
</script>
</body> 