Vue组件

5.1 组件创建方式

5.2 全局组件&局部组件

5.3 组件语法糖

5.3.1 全局组件语法糖

<div id="app">
  <ta></ta>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
   //语法糖：省略Vue.extend()
   Vue.component("ta",{
     template:'<div>这是一个VUE的组件<p>组件是个很神奇的东西!</p></div>',
   });
  const app = new Vue({
    el:"#app",
    // components:{
    //   "ta":template_a
    // },
    data:{
    }
  });
</script>

5.3.2 局部组件语法糖

<div id="app">
  <ta></ta>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
  const app = new Vue({
    el:"#app",
    components:{
      "ta":{
        template:'<div>这是一个VUE的组件<p>组件是个很神奇的东西!</p></div>',
      }
    }
  });
</script>

5.4 模板的分离写法

写法一：script

<div id="app">
  <ta></ta>
  <ta></ta>
  <ta></ta>
</div>

<script type="text/x-template" id="mytemplate">
  <div>
      这是一个VUE的组件
    <p>组件是个很神奇的东西!</p>
    <p>组件的学习非常关键！</p>
  </div>
</script>

<script type="text/javascript">
  const app = new Vue({
    el:"#app",
    components:{"ta":{
        template:"#mytemplate"
      }}
  });
</script>

写法二：template

<div id="app">
  <ta></ta>
  <ta></ta>
  <ta></ta>
</div>

<template id="mytemplate">
  <div>
      这是一个VUE的组件
    <p>组件是个很神奇的东西!</p>
    <p>组件的学习非常关键！</p>
  </div>
</template>

<script type="text/javascript">
  const app = new Vue({
    el:"#app",
    components:{"ta":{
        template:"#mytemplate"
      }}
  });
</script>

5.5 组件的父子通讯

5.5.1 父组件传值给子组件

<div id="app">
  <child :childbooks="books" :cmessage="message"></child>
</div>

<template id="childComp">
  <div>
    <p>{{cmessage}}</p>
    <ul>
      <li v-for="item in childbooks">{{item}}</li>
    </ul>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
  const app = new Vue({
    el:"#app",

    data:{
        books:["java","c++","python"],
        message:"hello world!"
    },
    components:{
      "child":{ //组件注册
        template:'#childComp',
        props:['childbooks',"cmessage"], //使用props来注册往组件中传递的值
        data(){return {};} 
      }
    }
  });
</script>

效果：

5.5.2 父子通讯变量驼峰原则

使用VUE脚手架时不存在该问题！

<div id="app">
  <!-- 在做变量绑定的时候使用的是childBooks时需要使用驼峰原则 child-books -->
  <child :child-books="books" :c-message="message"></child>
</div>

<template id="childComp">
  <div>
    <p>{{cMessage}}</p>
    <ul>
      <li v-for="item in childBooks">{{item}}</li>
    </ul>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
  const app = new Vue({
    el:"#app",

    data:{
        books:["java","c++","python"],
        message:"hello world!"
    },
    components:{
      "child":{
        template:'#childComp',
        props:['childBooks',"cMessage"],
        // data(){return {};}
      }
    }
  });
</script>

5.5.3 传值的类型限制

类型验证支持的类型：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol
• 自定义类型

<div id="app">
  <!--  :c-message="message" -->
  <!--  标签未绑定值时才启用默认值 -->
  <child :child-books="books"></child>
</div>

<template id="childComp">
  <div>
    <p>{{cMessage}}</p>
    <ul>
      <li v-for="item in childBooks">{{item}}</li>
    </ul>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
  const app = new Vue({
    el:"#app",
    data:{
        books:["java","c++","python"],
        // message:"hello world!"
    },
    components:{
      "child":{
        template:'#childComp',
        props:
          {"childBooks":{
            type:Array,
            required:true,
            /*
            *如果指定required，但是没有传值；会报如下错误：
            vue.js:634 [Vue warn]: Missing required prop: "cMessage"
						found in
						---> <Child>
       						<Root>
            */
            default(){

            }
          },"cMessage":{
            type:String,default:'这是一个默认你消息！'
          }}
        // props:['childBooks',"cMessage"],
        // data(){return {};}
      }
    }
  });
</script>

5.5.4 父子组件传值的三种方式

• 使用数组进行简单传值
• 类型限制
• 提供默认值

5.6 组件的子父传值

实例

<div id="app">
  <child :c-message="message" @childitemclick="childclick"></child>
</div>
<template id="childComp">
  <div>
    <p>{{cMessage}}</p>
    <ul>
      <li @click="bookclick(item)" v-for="item in mybooks">{{item.id}} - {{item.name}}</li>
    </ul>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
  const app = new Vue({
    el:"#app",
    methods:{
      childclick(item){
        console.log("--p--");
        console.log(item);
      }
    },data:{
      message:"hello world!"
    },
    components:{
      "child":{
        template:'#childComp',
        methods:{
          bookclick(item){
            this.$emit('childitemclick',item);
          }
        },
        data(){
          return {
            mybooks:[
              {id:1,name:'Java从入门到放弃'},
              {id:2,name:'Python从入门到放弃'},
              {id:3,name:'ObjectC从入门到放弃'},
              {id:4,name:'C++从入门到放弃'}
            ]
          };
        },
        props:
          {"cMessage":{
            type:String,required:true,default:'这是一个默认你消息！'
          }}
      }
    }
  });
</script>