vuejs学习2.6 语法——组件化开发1——基础

最新推荐文章于 2023-06-26 17:55:49 发布

to-and-fro

最新推荐文章于 2023-06-26 17:55:49 发布

阅读量171

点赞数

分类专栏： vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_39225271/article/details/108291739

版权

vuejs 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

组件化开发

组件化的实现和使用步骤（vue1.x方法实现）
全局组件和局部组件
父组件和子组件
注册组件的语法糖写法（vue2.x后方法方法实现)
组件模板抽离
- script
- template
组件存放数据
data必须是一个函数原因
- 1，函数例子
- 2，解释

组件化的实现和使用步骤（vue1.x方法实现）

组件化是vuejs的重要思想，可以开发出一个个独立可复用的小组件来构造我们的应用，任何的应用都会被抽象成一颗组件树。
组件的使用分为三个步骤：创建组件构造器（调用Vue.extend()方法），注册组件（调用Vue.component()方法），使用组件（在Vue实例作用范围内使用）
ES5语法中定义字符串使用单（双）引号必须通过+连接才能换行
ES6语法：可以使用 ``（tab键上面）来定义字符串，可以直接换行

<body>
<div id="app">
  <my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>
<script>
  //创建组件构造器对象，template中使用html源码
  const cpnC = Vue.extend({
    template:`<div>
       <h2>我是标题</h2>
       <p>我是内容1232412</p>
       <p>我是内容222232412</p>
      </div>`
  })
  
  //注册组件，名字为my-cpn
  Vue.component('my-cpn',cpnC);

  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    }
  })
</script>
</body>

1，创建组件构造器Vue.extend
传入的template代表自定义组件的模板，模板就是使用到组件的地方，要显示html代码
2，注册组件Vue.component
将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名，传递的参数为两个：标签名，构造器
3，组件必须挂在在Vue实例下，否则不会生效

全局组件和局部组件

按照上述创建组件为全局组件，如果要创建局部组件，需要在vue实例内部的components属性

<script>
  //创建组件构造器
  const cpnC = Vue.extend({
    template:`<div>
       <h2>我是标题</h2>
       <p>我是内容1232412</p>
       <p>我是内容222232412</p>
      </div>`
  });
  //注册全局组件，表示可以在多个Vue的实例下使用
  //Vue.component('cpn',cpnC);

  //注册局部组件
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    },
    components:{//局部属性
      cpn:cpnC,
    }
  })
</script>

父组件和子组件

组件和组件之间存在层级关系，一个组件中可能包含一个组件，在创建组件构造器中使用components来注册子组件

<body>
<div id="app">
  <cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
  //创建组件构造器
  const cpnC1 = Vue.extend({
    template:`<div>
       <h2>我是子组件</h2>
       <p>我是内容1232412</p>
       <p>我是内容222232412</p>
      </div>`
  });
  
  //创建组件构造器
  const cpnC2 = Vue.extend({
    template:`<div>
       <h2>我是父组件</h2>
       <p>我是内容1232412</p>
       <p>我是内容222232412</p>
       <cpn1></cpn1>
      </div>`,
    components:{
    //注册组件
      cpn1:cpnC1,
    }
  });

  //注册局部组件
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    },
    components:{//局部属性
    //注册组件
      cpn2:cpnC2,
    }
  })
</script>

cpn1不能在app下使用，只能在cpn2下使用

注册组件的语法糖写法（vue2.x后方法方法实现)

省去了调用Vue.extend的步骤，可以直接用一个对象来代替

  注册全局组件
  Vue.component('cpn1',{template:`<div>
       <h2>我是子组件</h2>
       <p>我是内容1232412</p>
       <p>我是内容222232412</p>
      </div>`});

//注册局部组件
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    },
    components:{
      cpn1:{
        template:`<div>
       <h2>我是子组件</h2>
       <p>我是内容1232412</p>
       <p>我是内容222232412</p>
      </div>`
      }
    }
  })

组件模板抽离

方法：使用template或者script，以后基本使用template

script

<div id="app">
  <cpn></cpn>
</div>
<!--第一种写法,使用Script标签，type为text/x-template 使用id-->
<script type="text/x-template" id="cpn">
  <div>
    <h2>我是子组件</h2>
    <p>我是内容1232412</p>
    <p>我是内容222232412</p>
  </div>
</script>

<script src="../js/vue.js"></script>
<script>
  Vue.component('cpn',{
    //对应id
    template:'#cpn'
  })
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    }
  })
</script>

template

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

<!--第二种写法，使用template标签 id-->
<template id="cpn">
  <div>
    <h2>我是子组件</h2>
    <p>我是内容1232412</p>
    <p>我是内容222232412</p>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  Vue.component('cpn',{
  //对应id
    template:'#cpn'
  })
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    }
  })
</script>

组件存放数据

组件不可以访问Vue实例中的data数据
组件中存放自己的数据用data属性，Vue实例中的data为对象类型，但是组件中的data属性为函数，必须返回一个对象

<div id="app">
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h2>{{title}}</h2>
    <p>我是内容1232412</p>
    <p>我是内容222232412</p>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  Vue.component('cpn',{
    template:'#cpn',
    data(){//必须是一个函数
      return {//而且必须包含return返回一个对象
        title:"我是标题data"
      }
    }
  })
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    }
  })
</script>

data必须是一个函数原因

1，函数例子

函数每次返回值的地址不同，当一个对象值改变时，其他值不会变

<script>
  function abc() {
    return {
      name:"123"
    }
  }
  let obj1 = abc();
  let obj2 = abc();
  obj1.name="234";
  console.log(obj2.name);//返回值为123
</script>

但是如果返回同一个对象，由于地址一样，当改变时，所有对象都改变

<script>
  let obj = {
    name:"123",
  }
  function abc() {
    return obj
  }
  let obj1 = abc();
  let obj2 = abc();
  obj1.name="234";
  console.log(obj2.name);//返回值为234
</script>

2，解释

如果data使用对象，每一个组件的data的值都是同一个对象，如果一个组件的data值发生改变，其他组件的值会发生改变，这样影响了其他组件
如果使用函数，返回值的data对象的地址不同，如果一个组件的data发生改变，其他组件不会发生影响

所以如果使用对象会报错，data必须是函数

to-and-fro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs学习2.6 语法——组件化开发1——基础

组件化开发组件化的实现和使用步骤（vue1.x方法实现）全局组件和局部组件父组件和子组件注册组件的语法糖写法（vue2.x后方法方法实现)组件模板抽离scripttemplate组件存放数据data必须是一个函数原因1，函数例子2，解释组件化的实现和使用步骤（vue1.x方法实现）组件化是vuejs的重要思想，可以开发出一个个独立可复用的小组件来构造我们的应用，任何的应用都会被抽象成一颗组件树。组件的使用分为三个步骤：创建组件构造器（调用Vue.extend()方法），注册组件（调用Vue.compo
复制链接

扫一扫