Vue（实现自定义组件）

最新推荐文章于 2023-09-13 17:54:22 发布
Error_exception_worn
最新推荐文章于 2023-09-13 17:54:22 发布
阅读量148
点赞数
文章标签： vue.js javascript 前端
本文链接：https://blog.csdn.net/hssjsh/article/details/127398768
版权
有关于Vue自定义组件和组件的基本使用部分的部分内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的基本使用</title>
  <script src="../../../框架/vue.js"></script>
</head>
<body>
<div id="app">
<!--  调用组件，使用自定义的组件名作为标签使用就可以达到在页面中使用组件的效果-->
  <my-component></my-component>
  <com2></com2>
  <com></com>
</div>
<hr>
<div id="app1">
<!--  这里体现了组件的可复用性-->
  <my-component></my-component>
</div>
<hr>
<div id="app3">
<!--  局部注册的组件只有注册的DOM可以使用-->
  <my-come></my-come>
  <Chile2></Chile2>
</div>
<hr>
<div id="app4">
<!--  同一个组件的多个实例之间的数据被共享了，并不是一个独立的个体-->
<!--  只有当组件中data的形式变成函数的时候才可以做到每一个组件的实例都时独立的副本-->
  <com3></com3>
  <com3></com3>
  <com3></com3>
</div>
<!--在外部定义使用标签的方式定义组件内容-->
<template id="tem">
  <div>
    <h1>这是template元素在外部定义的组件内容</h1>
  </div>
</template>
<div id="app5">
  <com4></com4>
</div>
<hr>
<!--开始组件嵌套的内容-->
<template id="tem1">
  <div>
    <h1>这是父组件的内容</h1>
<!--    组件在哪里注册的就在哪里用，子组件在父组件的内部注册就只能在父组件的框架内部使用-->
    <c_one></c_one>
    <c_two></c_two>
  </div>
</template>
<div id="app6">
<!--  只需要调用父组件的标签就可以一起调用下面的子组件的内容-->
  <f-com></f-com>
</div>
<hr>
<!--开始组件通信的内容-->
<!--使用props的方式完成同一个组件的动态数据更新-->
<div id="app7">
<!--  当属性名的前面加了一个冒号之后，会将属性值转换成一个表达式，并将表达式运算后的结果返回一个值再赋值给属性名，并且也具有基本的v-bind指令的绑定作用-->
  <p_com name="张三" :age="12" address="山东" :msg="msg"></p_com>
</div>
<hr>
<!--当需要保留原数据并想对数据进行修改的时候可以将数组进行转移-->
<div id="app8">
<!--  这个地方加引号表示这个地方是一个表达式，并且可以把原本是字符串的数字变成正常的数字进行运算-->
  <p_com2 :mag="0"></p_com2>
</div>
<hr>
<div id="app9">
  <p_com3 name="李四" :age="14" address="山东"></p_com3>
</div>
<script>
<!--  使用Vue对象的component方法注册一个全局组件-->
  Vue.component('my-component',{
    template:'<div><h1>这里是组件的内容</h1><h2>这里是组件的内容</h2></div>'
  });
  //此处的component方法的作用是注册一个组件，其实可以用变量存储一个组件的形式，然后将变量传入
  let c = Vue.extend({
    template:'<div><h1>你好世界</h1></div>',
  });
  //此处表示将组件代码封装进一个变量中并在注册组件的时候将封装了组内内容的变量传入，同样可以完成注册组件的动作
  Vue.component('com',c);

  Vue.component('com2',{
    //组件是HTML框架片段，JS逻辑处理模块和CSS样式组成的集合，必须含有一个template属性并且属性内有且只有一个根标签
    template:'<div>{{msg}}</div>',
    //组件中的data选项必须写成函数的形式，否则会出现同一个组件的不同实例之间的数据混乱
    data:function(){
      return {
        msg:'组件中的内容'
      }
    }
  });
  let Chile = {
    //定义一个组件，组件的内容是封装在变量中的
    template:"<div><p>我是色板</p><input type='color' /> </div>"
  };
  let Chile2={
    //定义一个组件，内容是一个输入框
    template:'<div> <p>我是一个输入框</p> <input type="text"/> </div>'
  }
  //全局组件也必须在一个Vue实例中使用，所以哪怕是空的Vue实例也必须要出现并在内部使用组件
  let a = new Vue({
    el:'#app',
  });
  let b = new Vue({
  el:'#app1',
  });
  let d = new Vue({
    el:'#app3',
    //在一个Vue实例中注册组件，组件在那里注册就只能在注册的组件中进行使用
    //注意当在组件中注册局部组件的时候，关键词需要加一个“s“
    components:{
      //前面是组件的名字，后面是封装了组件内容的变量的名字，也即是说在组件定义的阶段并不能真正的组件的名字，只有当注册的时候才可以修改组件的名字
      'my-come':Chile,
    //  而当组件的名字与变量的名字相同时，可以简写成以下形式
      Chile2
    }
  });
  let data = {
    count:0
  }
  Vue.component('com3',{
    //框架代码
    template:'<button type="button" @click="count++">你点击了：{{count}}次</button>',
    data:function(){
      //数据传递，当数据是一个变量而不是表达式时，不需要大括号 直接在后面加入一个空格后跟变量名即可
      // return data 这种形式的写法会导致数据共享
      //只有当data的形式是一个函数的时候才可以做到每一个实例都是一个独立的副本
      return {
        count: 0
      }
    }
  })
  Vue.component('com4',{
    template:'#tem',
  })
  let e = new Vue({
    el:'#app4',
  });
  let f = new Vue({
    el:'#app5',
  });
  //组件嵌套就是在父组件的内部调用子组件的标签
  let h = {
    template:'<div><h2>这是第一个子组件的内容</h2></div>'
  }
  let i = {
    template:'<div><h2>这是第二个子组件的内容</h2></div>'
  }
  Vue.component('f-com',{
    template:'#tem1',
    components:{
      //在父组件的内部注册子组件，只有这样才能完成组件的嵌套，并且子组件的调用标签只能在父组件的框架中使用
      'c_one':h,
      'c_two':i,
    }
  })
  let g = new Vue({
    el:'#app6',
  });
  let k = {
    template:'<div><ul><li>姓名：{{name}}</li><li>年龄：{{age}}</li><li>地址：{{address}}</li><li>{{msg}}</li></ul></div>',
    //props是一个数组，接受了在标签中的属性名和属性值
    props:['name','age','address','msg']
  }
  let j = new Vue({
    el:'#app7',
    data(){
      return {
        msg:'来自外部的数据'
      }
    },
    components:{
      'p_com':k,
    }
  });
  let m = {
    template:'<div>原数据是：{{mag}}<br><button type="button" @click="add">修改后的数据是：{{count}}</button></div>',
    data:function(){
      return {
        //将外部的数据传入一个内部变量，相当于给原数据一个副本，然后修改这个副本就可以保证原数据不变的情况下还能修改数据
        count:this.mag
      }
    },
    methods:{
      add:function (){
        this.count++
      }
    },
    props:['mag'],
  }
  let l = new Vue({
    el:'#app8',
    components:{
      'p_com2':m
    }
  });
  let o = {
    template:'<div><ul><li>姓名：{{name}}</li><li>年龄：{{age}}</li><li>地址：{{address}}</li></ul></div>',
    //当props选项的值是一个对象的时候，表示不仅接收这个属性的值，并且也对值进行约束
    props:{
      //并且可以对某一个值做更加具体的约束，比如类型，是否为必填，默认值等
      //当传入的属性值不符合约束的时候，就会导致传递参数失败并且在浏览器的控制台打印错误信息
      name:{
        type:String,
        required:true,
        default:'张三'
      },
      age:Number,
      address:String
    }
  }
  let n = new Vue({
    el:'#app9',
    components:{
      'p_com3':o
    }
  });
</script>
</body>
</html>