码迷，mamicode.com
首页 > 其他好文 > 详细

03、组件化开发、父子组件通信

时间：2020-07-18 16:10:10      阅读：93      评论：0      收藏：0      [点我收藏+]

标签：v-model   count   变化   obj   取出   down   r++   字符串数组   目录   

目录

组件化开发

组件化的基本使用过程

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div>
  <h2>我是标题</h2>
  <p>我是内容，哈哈哈哈哈</p>
  <p>我是内容，哈哈哈哈哈</p>

  <h2>我是标题</h2>
  <p>我是内容，哈哈哈哈哈</p>
  <p>我是内容，哈哈哈哈哈</p>

  <h2>我是标题</h2>
  <p>我是内容，哈哈哈哈哈</p>
  <p>我是内容，哈哈哈哈哈</p>

  <h2>我是标题</h2>
  <p>我是内容，哈哈哈哈哈</p>
  <p>我是内容，哈哈哈哈哈</p>
</div>
<script src="../js/vue.js"></script>
<script>

</script>
</body>
</html>

容易造成大量重复性代码，所以需要把页面中需要多次使用的代码提取出来，作为一个组件（Component）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 组件必须挂载在某个实例下，否则不会生效 -->
  <my-component></my-component>
  <div>
    <my-component></my-component>
  </div>
</div>
<!-- 不会生效 -->
<my-component></my-component>
<script src="../js/vue.js"></script>
<script>
  //1、创建一个组件构造器对象
  const component = Vue.extend({
    template: `
    <div>
      <h2>我是标题</h2>
      <p>我是内容，哈哈哈哈哈</p>
      <p>我是内容，哈哈哈哈哈</p>
    </div>`
    /* template:自定义组件的模板 */
    /* ES6新增一种字符串的表示方式，``，优点在于可以换行 */
  });
  //2、注册组件
  Vue.component(‘my-component‘, component);

  const app = new Vue({
    el: ‘#app‘,
    data: {

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

技术图片

事实上，这种写法在Vue 2.x的文档中几乎已经看不到了，他会直接使用我们下面的语法糖。

全局组件和局部组件

全局组件：可以在多个Vue的实例下使用；

局部组件：在哪个Vue实例下注册，就只能在哪个Vue实例绑定的组件中使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-component></my-component>
  <demo></demo>
</div>
<!-- 全局组件：可以在多个Vue实例下使用 -->
<div id="test">
  <my-component></my-component>
  <!-- 在app的Vue实例下注册的局部组件，不能在test中使用 -->
  <demo></demo>
</div>
<script src="../js/vue.js"></script>
<script>
  const component = Vue.extend({
    template: `
      <div>
        <h2>全局组件的标题</h2>
        <p>我是内容，哈哈哈哈</p>
        <p>我是内容，哈哈哈哈</p>
      </div>
    `
  });
  //2、注册组件（全局组件）
  Vue.component(‘my-component‘, component);


  const demo = Vue.extend({
    template: `
      <div>
        <h2>局部组件的标题</h2>
        <p>我是内容，嘻嘻嘻嘻</p>
        <p>我是内容，嘻嘻嘻嘻</p>
      </div>
    `
  });

  const app = new Vue({
    el: ‘#app‘,
    components: {
      /* 注册局部组件,在某个Vue实例下注册,只能在该实例绑定的组件下使用 */
      ‘demo‘: demo
    }
  });

  const test = new Vue({
    el: ‘#test‘
  });
</script>
</body>
</html>

技术图片

注册组件的语法糖写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <component1></component1>

  <my-component></my-component>
</div>

<script src="../js/vue.js"></script>
<script>
  //全局组件注册的语法糖
  Vue.component(‘component1‘,{
    template: `
      <div>
        <h2>我是全局组件的标题</h2>
        <p>我是内容，哈哈哈哈</p>
      </div>
    `
  });


  const app = new Vue({
    el: ‘#app‘,
    components: {
      //局部组件注册的语法糖
      ‘my-component‘: {
        template: `
          <div>
            <h2>我是局部组件的标题</h2>
            <p>我是内容，呵呵呵呵</p>
          </div>
        `
      }
    }
  })
</script>
</body>
</html>

组件模板抽离的写法

在组件中写template模板的HTML代码是一件十分麻烦的事，特别不方便。

Vue提供了两种方案写HTML代码

  • 使用script标签（不常用）
  • 使用template标签
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-component></my-component>
</div>

<!-- 使用template标签 -->
<template id="my-component-template">
  <div>
    <h2>我是全局组件的标题</h2>
    <p>我是内容，哈哈哈哈</p>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  /* 注册全局组件：组件与模板分离 */
  Vue.component(‘my-component‘, {
    template: ‘#my-component-template‘,
  });

  const app = new Vue({
    el: ‘#app‘,
  })
</script>
</body>
</html>

组件的数据存放问题

组件可以访问Vue实例的数据吗？

  • 组件内部不能访问Vue实例中的数据

Vue组件应该有自己保存数据的地方。

组件有一个data属性，（必须是一个函数），这个函数返回一个对象，对象内部保存着数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <my-component></my-component>
</div>

<template id="my-component-template">
  <div>
    <span>{{message}}</span>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  Vue.component(‘my-component‘, {
    template: ‘#my-component-template‘,
    data() {
      return {
        message: ‘Hello Vue.js‘,
      }
    }
  })

  const app = new Vue({
    el: ‘#app‘,
    data: {

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

组件中的data为什么是函数？

单个页面复用一个组件时，组件的data域就不能是属性了，不然修改一个组件，其他组件都跟着变化。

把计数器封装为一个组件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-counter></my-counter>
  <hr>
  <my-counter></my-counter>
  <hr>
  <my-counter></my-counter>
</div>

<template id="my-counter-template">
  <div>
    <h3>当前计数：{{counter}}</h3>
    <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  Vue.component(‘my-counter‘, {
    template: ‘#my-counter-template‘,
    data() {
      return {
        counter: 0
      }
    },
    methods: {
      increment() {
        this.counter++;
      },
      decrement() {
        this.counter--;
      }
    }
  })

  const app = new Vue({
    el: ‘#app‘,
    data: {}
  })
</script>
</body>
</html>

技术图片

组件通信

父子通信父传子

Vue官方提供的父子组件通信方式

  • 通过props向子组件传递数据
  • 通过事件向父组件发送消息

在下面的代码中，直接将Vue实例作为父组件，并且其中包含子组件来简化代码。

props的值有两种方式：

  • 字符串数组：数组中的字符串就是传递时的名称（id）；
  • 对象：功能丰富，常用

props是数组类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 子组件不能直接使用父组件/Vue实例的数据，可以通过Vue实例/父组件向子组件通信的方式来传递数据 -->
  <my-component-son v-bind:books="books" v-bind:message="message"></my-component-son>
</div>

<template id="my-component-son-template">
  <div>
    <ul>
      <li v-for="item in books">{{item}}</li>
    </ul>
    <span>{{message}}</span>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  const app = new Vue({
    el: ‘#app‘,
    data: {
      message: ‘你好啊‘,
      books: [‘三体‘, ‘平凡的世界‘, ‘春‘, ‘白夜行‘]
    },
    components: {
      ‘my-component-son‘: {
        template: ‘#my-component-son-template‘,
        data() {
          return {

          }
        },
        /* props是一个字符串数组 */
        props: [‘books‘, ‘message‘]
      }
    }
  })
</script>
</body>
</html>

props是对象类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 没有绑定number,显示默认值1 -->
  <my-component-son v-bind:books="books" :message="message"></my-component-son>
</div>

<template id="my-component-son-template">
  <div>
    <ul>
      <li v-for="item in books">{{item}}</li>
    </ul>
    <span>{{message}}</span>
    <span>{{number}}</span>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  const app = new Vue({
    el: ‘#app‘,
    data: {
      message: ‘你好啊‘,
      books: [‘三体‘, ‘解忧杂货铺‘, ‘白夜行‘, ‘时间简史‘],
      number: 100,
    },
    components: {
      ‘my-component-son‘: {
        template: ‘#my-component-son-template‘,
        /* props是对象，可以指定变量的类型，并且提供默认值 */
        props: {
          /*books: Array,
          message: String,
          number: Number,*/
          books: {
            type: Array,
            /* 对象或数组默认值必须从一个工厂函数获取 */
            default() {
              return [];
            },
            required: true
          },
          message: {
            type: String,
            default: ‘‘,
            required: true
          },
          number: {
            type: Number,
            default: 1,
            required: false
          }
        }
      }
    }
  })
</script>
</body>
</html>

props驼峰标识

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- son-info -->
  <my-component-son v-bind:son-info="info"></my-component-son>
</div>

<template id="my-component-son-template">
  <div>
    <ul>
      <!-- sonInfo -->
      <li v-for="(value, key, index) in sonInfo">{{index + 1}}---{{key}}:{{value}}</li>
    </ul>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>


  const app = new Vue({
    el: ‘#app‘,
    data: {
      info: {
        name: ‘张三‘,
        age: 22,
        gender: ‘男‘
      }
    },
    components: {
      ‘my-component-son‘: {
        template: ‘#my-component-son-template‘,
        props: {
          /* sonInfo */
          sonInfo: {
            type: Object,
            default() {
              return {};
            },
            required: true
          }
        }
      }
    }
  })
</script>
</body>
</html>

父子通信子传父

Vue官方提供的父子组件通信方式

  • 通过props向子组件传递数据
  • 通过事件向父组件发送消息
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- v-on监听自定义事件,cpnClick不传递参数默认会把item传递到父组件 -->
  <my-component-son v-on:item-click="cpnClick"></my-component-son>
</div>

<template id="my-component-son-template">
  <div>
    <button v-for="item in categories" v-on:click="btnClick(item)">{{item.name}}</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: ‘#app‘,
    components: {
      ‘my-component-son‘: {
        template: ‘#my-component-son-template‘,
        data() {
          return {
            categories: [
              {
                id: 1,
                name: ‘家用电器‘
              },
              {
                id: 2,
                name: ‘手机通讯‘
              },
              {
                id: 3,
                name: ‘电脑办公‘
              }
            ],
          }
        },
        methods: {
          btnClick(item) {
            /* 子组件发射事件,事件类型自定义为‘item-click‘ */
            this.$emit(‘item-click‘, item);
          }
        }
      }
    },
    methods: {
      /* 调用时没有传递参数,以前默认传递event,这里传递item */
      cpnClick(item) {
        console.log(‘cpnClick‘, item);
      }
    }
  });
</script>
</body>
</html>

技术图片

父子组件通信结合表单的双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-component v-bind:number1="num1" :number2="num2"
                v-on:n1change="num1change" v-on:n2change="num2change"></my-component>
</div>

<template id="my-component-template">
  <div>
    <span>props:{{number1}}</span>
    <span>data:{{n1}}</span>
    <input type="number" id="n1" v-model.number="n1">
    <label for="n1"></label>
    <br>
    <span>props:{{number2}}</span>
    <span>data:{{n2}}</span>
    <input type="number" id="n2" v-model.number="n2">
    <label for="n2"></label>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  const app = new Vue({
    el: ‘#app‘,
    data: {
      num1: 1,
      num2: 0,
    },
    components: {
      ‘my-component‘: {
        template: ‘#my-component-template‘,
        props: {
          number1: {type: Number},
          number2: {type: Number},
        },
        data() {
          return {
            n1: this.number1,
            n2: this.number2
          }
        },
        watch: {
          n1(newValue) {
            //n1修改,n2=n1*100
            this.n2 = newValue * 100;
            this.$emit(‘n1change‘, newValue);
            this.$emit(‘n2change‘, this.n2);
          },
          n2(newValue) {
            //n2修改,n1=1/100*n2
            this.n1 = 1/100 * newValue;
            this.$emit(‘n2change‘, newValue);
            this.$emit(‘n1change‘, this.n1);
          }
        }
      }
    },
    methods: {
      num1change(value) {
        this.num1 = parseInt(value);
      },
      num2change(value) {
        this.num2 = parseInt(value);
      }
    }
  })
</script>
</body>
</html>

注意点：

1、template标签，一定要有一个根标签；

2、组件的data必须是一个函数；

3、组件的props最好用对象；

4、组件绑定模板用#。

父访问子

父组件访问子组件：$children或者$refs。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- ref在实际开发中用的很多 -->
  <my-component-1 ref="one"></my-component-1>
  <my-component-1 ref="two"></my-component-1>
  <my-component-1 ref="three"></my-component-1>
  <button v-on:click="btnClick">按钮</button>
</div>

<template id="my-component-1-template">
  <div>
    <span>我是子组件1号</span>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  const app = new Vue({
    el: ‘#app‘,
    data: {

    },
    components: {
      ‘my-component-1‘: {
        template: ‘#my-component-1-template‘,
        methods: {
          showMessage() {
            console.log(‘showMessage‘);
          }
        },
        data() {
          return {
            name: ‘Hello Vue.js‘
          }
        }
      }
    },
    methods: {
      btnClick() {
        /*
        this.$children不常使用
        for (let item of this.$children) {
          item.showMessage();
          console.log(item.name);
        }
        */
        console.log(this.$refs.three.name);
        //Hello Vue.js
      }
    }
  })
</script>
</body>
</html>

子访问父

子组件访问父组件：$parent。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-component></my-component>
</div>

<template id="my-component-template">
  <div>
    <span>我是子组件</span>
    <button v-on:click="btnClick">按钮</button>
    <my-component-son></my-component-son>
  </div>
</template>

<template id="my-component-son-template">
  <div>
    <span>我是子组件的子组件</span>
    <button v-on:click="btnClick">按钮</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: ‘#app‘,
    data: {
      message: ‘你好a‘
    },
    components: {
      ‘my-component‘: {
        template: ‘#my-component-template‘,
        methods: {
          btnClick() {
            console.log(this.$parent);
          }
        },
        data() {
          return {
            name: ‘我是my-component组件的name‘
          }
        },
        components: {
          ‘my-component-son‘: {
            template: ‘#my-component-son-template‘,
            methods: {
              btnClick() {
                /* 访问父组件 */
                console.log(this.$parent);
                console.log(this.$parent.name);
                /* 访问根组件 */
                console.log(this.$root);
                console.log(this.$root.message);
              }
            }
          }
        }
      }
    }
  })
</script>
</body>
</html>

03、组件化开发、父子组件通信

标签：v-model   count   变化   obj   取出   down   r++   字符串数组   目录   

原文地址：https://www.cnblogs.com/shawnyue-08/p/12763528.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！