component
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
* 概要 [#o74a1876]
组件是拥有一定功能多个html标签的集合体，是对html标签的封...
#codeprettify{{
<div id="app">
<h2>组件应用-其他成员</h2>
<com-page></com-page>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
// 注册私有组件
components:{
'com-page':{
template:`
<ul>
<li>\{\{ prev \}\}</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li @click="xia()">\{\{ next \}\}</li>
</ul>
`,
created(){
console.log('created已经执行了')
},
methods:{
xia(){
console.log('进入下一页')
}
},
data:function(){
return {
prev:'上一页',
next:'下一页',
}
}
}
},
});
</script>
}}
* Tips [#q0269a01]
** 多层嵌套 [#mbf758d0]
定义一个子模板
#codeprettify{{
<template>
<FormPerson ref="formPerson" ></FormPerson>
}}
访问子模板里面的 form
#codeprettify{{
methods: {
//子模板 form 的验证
this.$refs['formCreateOrder'].$children[0].validate((vali...
if (valid) {
...
}
});
//访问子模板 form 的 v-model
console.log(this.$refs['formPerson'].$children[0].model);
}
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
* 概要 [#o74a1876]
组件是拥有一定功能多个html标签的集合体，是对html标签的封...
#codeprettify{{
<div id="app">
<h2>组件应用-其他成员</h2>
<com-page></com-page>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
// 注册私有组件
components:{
'com-page':{
template:`
<ul>
<li>\{\{ prev \}\}</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li @click="xia()">\{\{ next \}\}</li>
</ul>
`,
created(){
console.log('created已经执行了')
},
methods:{
xia(){
console.log('进入下一页')
}
},
data:function(){
return {
prev:'上一页',
next:'下一页',
}
}
}
},
});
</script>
}}
* Tips [#q0269a01]
** 多层嵌套 [#mbf758d0]
定义一个子模板
#codeprettify{{
<template>
<FormPerson ref="formPerson" ></FormPerson>
}}
访问子模板里面的 form
#codeprettify{{
methods: {
//子模板 form 的验证
this.$refs['formCreateOrder'].$children[0].validate((vali...
if (valid) {
...
}
});
//访问子模板 form 的 v-model
console.log(this.$refs['formPerson'].$children[0].model);
}
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
