mixins
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
* 概要 [#z6ce465e]
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中...
- 一个混入对象可以包含任意组件选项。
- 同一个生命周期，混入对象会比组件的先执行。
mixins 的例子：
#codeprettify{{
export const mixinsTest = {
methods:{
hello(){
console.log("hello");
}
},
created(){
this.hello()
}
}
}}
组件中引入这个mixins对象 的例子：
#codeprettify{{
<template>
<div>
home
</div>
</template>
<script>
import {mixinsTest} from '../util/test.js'
export default {
name: "Home",
data () {
return {
};
},
created(){
console.log("home");
},
//mixins的created会先被调用,然后再执行组件的created
mixins:[mixinsTest]
}
</script>
}}
* 局部混入和全局混入 [#h9c16137]
** 局部混入 [#hd87028a]
创建mixin.js文件，在需要的组件或者页面引入
#codeprettify{{
import mixin from '../../mixins/mixin'
export default{
mixins:[mixin],
data(){
return {}
}
mounted(){
this.mixinMethod()
}
}
}}
** 全局混入 [#a4904f47]
#codeprettify{{
Vue.mixin({
methods:{
mixinOne:function(){
console.log('mixinOne')
}
}
})
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
* 概要 [#z6ce465e]
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中...
- 一个混入对象可以包含任意组件选项。
- 同一个生命周期，混入对象会比组件的先执行。
mixins 的例子：
#codeprettify{{
export const mixinsTest = {
methods:{
hello(){
console.log("hello");
}
},
created(){
this.hello()
}
}
}}
组件中引入这个mixins对象 的例子：
#codeprettify{{
<template>
<div>
home
</div>
</template>
<script>
import {mixinsTest} from '../util/test.js'
export default {
name: "Home",
data () {
return {
};
},
created(){
console.log("home");
},
//mixins的created会先被调用,然后再执行组件的created
mixins:[mixinsTest]
}
</script>
}}
* 局部混入和全局混入 [#h9c16137]
** 局部混入 [#hd87028a]
创建mixin.js文件，在需要的组件或者页面引入
#codeprettify{{
import mixin from '../../mixins/mixin'
export default{
mixins:[mixin],
data(){
return {}
}
mounted(){
this.mixinMethod()
}
}
}}
** 全局混入 [#a4904f47]
#codeprettify{{
Vue.mixin({
methods:{
mixinOne:function(){
console.log('mixinOne')
}
}
})
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
