Vue的学习笔记(组件化）

Vue的组件化就是将一整块复杂的处理逻辑拆分成一个个功能块，每个功能块完成属于自己这块独立的功能，这样易于管理和扩展。

组件的使用：
（1）创建组件构造器
（2）注册组件
（3）使用组件

在这里插入图片描述
基本用法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue.js" type="text/javascript"> </script>
</head>
<body>
  <div id="app">
    <my-cpn></my-cpn>
  </div>
  <script type="text/javascript">

    const cpn=Vue.extend({
    template:
    `<div>标题</div>`
    })

    Vue.component('my-cpn',cpn)

    var vm = new Vue({
    el: '#app',
    data: {    
      message: 'Hello Vue!',
    },
    methods: {

    }
  })
  </script>
</body>
</html>

在这里插入图片描述
全局组件与局部组件
全局声明的是全局组件，在Vue实例中声明的是局部组件。

局部组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue.js" type="text/javascript"> </script>
</head>
<body>
  <div id="app">
    <cpn></cpn>
  </div>
  <script type="text/javascript">

    const cpn=Vue.extend({
    template:
    `<div>标题</div>`
    })


    var vm = new Vue({
    el: '#app',
    components:{
      cpn:cpn,
    }
  })
  </script>
</body>
</html>

父组件与子组件的用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue.js" type="text/javascript"> </script>
</head>
<body>
  <div id="app">
    <cpn2></cpn2>
  </div>
  <script type="text/javascript">

    const cpn1=Vue.extend({
    template:
    `<div>标题1</div>`,

    })

    const cpn2=Vue.extend({
    template:
    `
    <div>
    <div>标题2</div>
     <cpn1></cpn1>
     </div>
    `,
    components:{
      cpn1:cpn1,
    }
    })


    var vm = new Vue({
    el: '#app',
    components:{
      cpn2:cpn2,
    }
  })
  </script>
</body>
</html>

使用语法糖
也就是Vue官网的实例
全局注册

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue.js" type="text/javascript"> </script>
</head>
<body>
  <div id="app">
    <cpn1></cpn1>
  </div>
  <script type="text/javascript">
    Vue.component('cpn1',{
      template:
      `
        <div>内容1</div>
      `
    });
    var vm = new Vue({
    el: '#app',
  })
  </script>
</body>
</html>

局部注册

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue.js" type="text/javascript"> </script>
</head>
<body>
  <div id="app">
    <cpn1></cpn1>
  </div>
  <script type="text/javascript">
    var cpn1={
      template:
      `
        <div>内容1</div>
      `
    }
    var vm = new Vue({
    el: '#app',
    components:{
      cpn1:cpn1,
    }
  })
  </script>
</body>
</html>

父、子组件的通信

在Vue中子组件是不能引用父组件的数据的，但是实际开发中父组件常常需要向子组件传递数据。
在这里插入图片描述
props用法示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue.js" type="text/javascript"> </script>
</head>
<body>
  <div id="app">
    <cpn :city1="city"></cpn>
  </div>
  <template id="cpn">
      <div >{{city1[0]}}</div>
  </template>
  <script type="text/javascript">
    var cpn={
      template:'#cpn',
      props:['city1'],
    }
    var vm = new Vue({
    el: '#app',
    data:{
      city:['北京','上海','广州']
    },
    components:{
      cpn:cpn,
    }
  })
  </script>
</body>
</html>

横石拦浪

发布了56 篇原创文章 · 获赞 3 · 访问量 1598

私信关注

Vue的学习笔记(组件化）

猜你喜欢