component の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+component へ行く。
• +Vue+component の差分を削除

#author("2022-05-11T19:24:58+08:00","default:Admin","Admin")
#author("2022-06-30T13:56:33+08:00","default:Admin","Admin")
[[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((valid) => {
  if (valid) {
    ...
  }
});

//访问子模板 form 的 v-model
console.log(this.$refs['formPerson'].$children[0].model);
}
}}

#hr();
コメント：
#comment_kcaptcha