Vue.js 模板使用方法

Vue.js 模板使用方法

主要内容
1. 全局模板 和 局部模版
2. 组件传入自定义数据props
3. 父组件向子组件传数据
4. 子组件向父组件传数据
5. 自定义事件形式

HTML部分

<div id="app">
         <h3>自定义的下拉框</h3>
         <!-- 查询框使用list1的数据 -->
         <custom-select btn-value="查询" v-bind:list="list1"></custom-select>

         <h3>自定义的下拉框2</h3>
         <!-- 搜索框使用list2的数据 -->
         <custom-select btn-value="搜索" v-bind:list="list2"></custom-select>
      </div>

JS部分

/*全局组件*/
Vue.component("custom-list",{
      props:["list"],  //向子组件传值
      template: `<ul class="list">
         <li v-for="item of list" @click="selectValueHandle(item)">{{item}}</li>
      </ul>`,  //模版中定义了单击事件,包含item数据
      methods:{
         selectValueHandle:function(item){
            //子组件给父组件传数据
            this.$emit("receive",item);  //触发"自定义事件"+传值,注意是"事件名"
         }
      },
   });

   new Vue({
      el: "#app",
      data :{
         list1:["北京","上海"],
         list2:["昨天","今天","明天"],
      },
      components: {
         "custom-select":{
            data:function(){
               return {
                  selectShow:false,  //默认隐藏list内容
                  val:""  //输入框的内容,默认为空
               };
            },
            props: ["btnValue","list"],  //传到子级的数据,驼峰形式
            template:`<section class="warp">
                <div class="searchIpt clearFix">
                    <div class="clearFix">
                        <input type="text" class="keyWord" v-bind:value="val" @click="selectShow=!selectShow"/>
                        <input type="button" v-bind:value="btnValue">
                        <span></span>
                    </div>
                  <custom-list v-show="selectShow" v-bind:list="list" v-on:receive="changeValueHandle"></custom-list>
                </div>
            </section>`,  //模板中定义 自定义时间类型+函数
            methods:{
               changeValueHandle(value){
                  this.val = value;  //此value就是item信息
               }
            }
         }
      },
   });