一文搞懂组件 Vue component (上篇)

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量1.6k 收藏 5
点赞数 5
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48165407/article/details/122154608
版权

前言

  vue作为前端目前三大主流框架之一，在前端中也是占有重要的地位。特别是在国内，现在想要找一份前端的工作，那么学会vue，将你的不二之选。

  vue目前为什么这么重要呢？因为vue的作者是中国人。那当然不是啦~ 最最最最重要的原因是它有很多优点：

  1. 双向数据绑定
  2. 组件化
  3. 单页面应用用户体验好
  4. 简单易学
  5. ……

  好了，现在知到vue.js的优点就是简单易学，那接下来我们就一起来学习学习它的组件化开发 --> component

什么是组件

  我们来看看官网的介绍，他说是可复用的 Vue 实例。那怎么复用呢？复用什么呢？之前我们写过了css样式，当有些样式是一样的，我们就会将它写到一个文件里然后通过@import url("CSS文件路径");将css文件引入，这样就可以不用多写重复的样式了。

  那么组件你可以理解成html、css、javaScript的集合，然后在其他地方引用。之前引入的css或者引入js都是纯粹的它的样式或者行为。而组件包过HTML代码、css代码、js代码，也就是说一个组件就有自己的结构、样式和行为了。有了组件，我们的代码的重复率就不会那么高了，代码的复用性就增强了。因为有很多页面的其中一部分都是一样的，比如：tabbar、导航栏等等。

学习组件

1. 组件的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化基本使用</title>
</head>
<body>
    <div id="app">
        <h1>This is a piece of app message!</h1>
        <!-- 3.使用组件 -->
        <test-cpn></test-cpn>
    </div>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        //1.创建组件构造器对象
        const TestCpn = Vue.extend({
            // template --> 定义组件的HTML模板
            template: `
            <div>
                <h2>组件标题</h2>
                <p>组件内容</p>
            </div>
            `
        })
        //2.注册组件
        // Vue.component('组件的标题','构造器对象')
        Vue.component('test-cpn', TestCpn);
        const vm = new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

组件的基本使用就是这三个步骤：

  1. 创建组件构造器对象
  2. 注册组件
  3. 使用组件

在这里插入图片描述

  当然组件可以使用多次，就像这样，你使用一次，它就渲染一次，它使用多少次，他就渲染多少次。你是不是开始觉得组件有点东西了！

<div id="app">
    <h1>This is a piece of app message!</h1>
    <!-- 3.使用组件 -->
    <test-cpn></test-cpn>
    <test-cpn></test-cpn>
    
    <!-- 使用单标签 -->
    <test-cpn/>
</div>

在这里插入图片描述

  组件中还可以定义data，但但但值得注意的是组件的data必须是一个函数且data函数要返回一个对象

<script>
    //1.创建组件构造器对象
    const TestCpn = Vue.extend({
        // template --> 定义组件的HTML模板
        template: `
        <div>
            <h2>组件标题</h2>
            <p>组件内容</p>
            {{mes}}
        </div>
        `,
        // data --> 用于存放组件的数据
        data() {
            return {
                mes: 'hello vue component!'
            }
        }
    })
    //2.注册组件
    // Vue.component('组件的标题','构造器对象')
    Vue.component('test-cpn', TestCpn);
    const vm = new Vue({
        el: '#app'
    })
</script>

在这里插入图片描述

  那么有人就有疑惑了！现在组件不是只有结构吗？样式呢？行为呢？好的！show code!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化基本使用</title>
    <style>
        .some-style{
            color: red;
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>This is a piece of app message!</h1>
        <!-- 3.使用组件 -->
        <test-cpn></test-cpn>
        <test-cpn></test-cpn>

        <!-- 使用单标签 -->
        <test-cpn/>
    </div>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        //1.创建组件构造器对象
        const TestCpn = Vue.extend({
            // template --> 定义组件的HTML模板
            template: `
            <div>
                <h2>组件标题</h2>
                <p class="some-style">组件内容</p>
                {{mes}}
                <button @click="handleBtn">点我你就知道了</button>
            </div>
            `,
            // data --> 用于存放组件的数据
            data() {
                return {
                    mes: 'hello vue component!'
                }
            },
            // methods --> 组件的方法都写到这里面
            methods: {
                handleBtn() {
                    console.log('这不就是组件的行为了吗？讨厌！')
                }
            }
        })
        //2.注册组件
        // Vue.component('组件的标题','构造器对象')
        Vue.component('test-cpn', TestCpn);
        const vm = new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

在这里插入图片描述

  好了，现在我们知道组件用也有data、也有methods。其实组件还有computed、watch、等等。

  其实我们通过 Vue.component() 注册的组件都是全局组件，这也就意味着可以在多个Vue的实例中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化基本使用</title>
    <style>
        .some-style{
            color: red;
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>This is a piece of app message!</h1>
        <!-- 3.使用组件 -->
        <test-cpn></test-cpn>
        <test-cpn></test-cpn>

        <!-- 使用单标签 -->
        <test-cpn/>
    </div>

    <div id="app2">
        <hr>
        <h1>This is a piece of app2 message!</h1>
        <test-cpn/>
    </div>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        //1.创建组件构造器对象
        const TestCpn = Vue.extend({
            // template --> 定义组件的HTML模板
            template: `
            <div>
                <h2>组件标题</h2>
                <p class="some-style">组件内容</p>
                {{mes}}
                <button @click="handleBtn">点我你就知道了</button>
            </div>
            `,
            // data --> 用于存放组件的数据
            data() {
                return {
                    mes: 'hello vue component!'
                }
            },
            // methods --> 组件的方法都写到这里面
            methods: {
                handleBtn() {
                    console.log('这不就是组件的行为了吗？讨厌！')
                }
            }
        })
        //2.注册组件
        // Vue.component('组件的标题','构造器对象')
        Vue.component('test-cpn', TestCpn);
        const vm = new Vue({
            el: '#app'
        })
        const vm2 = new Vue({
            el: '#app2'
        })
    </script>
</body>
</html>

在这里插入图片描述

  那怎么使用局部组件呢？那就是在实例里边注册组件。

  如下例子：当我们在实例vm里边注册TestCpn组件,那么在实例vm2里使用TestCpn组件时，它就会报错，且没有数据展示到页面上。这是因为实例vm2找不到TestCpn组件。因为它是在实例vm定义的嘛！所以这就是局部组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化基本使用</title>
    <style>
        .some-style{
            color: red;
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>This is a piece of app message!</h1>
        <!-- 3.使用组件 -->
        <test-cpn></test-cpn>
        <test-cpn></test-cpn>

        <!-- 使用单标签 -->
        <test-cpn/>
    </div>

    <div id="app2">
        <hr>
        <h1>This is a piece of app2 message!</h1>
        <test-cpn/>
    </div>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        //1.创建组件构造器对象
        const TestCpn = Vue.extend({
            // template --> 定义组件的HTML模板
            template: `
            <div>
                <h2>组件标题</h2>
                <p class="some-style">组件内容</p>
                {{mes}}
                <button @click="handleBtn">点我你就知道了</button>
            </div>
            `,
            // data --> 用于存放组件的数据
            data() {
                return {
                    mes: 'hello vue component!'
                }
            },
            // methods --> 组件的方法都写到这里面
            methods: {
                handleBtn() {
                    console.log('这不就是组件的行为了吗？讨厌！')
                }
            }
        })
        const vm = new Vue({
            el: '#app',
            //2.在vm实例里面 注册组件
            // component('组件的标题','构造器对象')
            components: {
                'test-cpn': TestCpn
            }
        })
        const vm2 = new Vue({
            el: '#app2'
        })
    </script>
</body>
</html>

在这里插入图片描述

  其实有个问题，我们在注册组件的时候(Vue.component('组件的标题', '构造器对象')) component的第二个参数不是要传一个构造器对象吗？ 那我们传给它好了，直接传一个选项对象，不用我们亲自去调用extend方法，因为Vue会帮我们去调用它，所以我们完全可以这样写：

Vue.component('test-cpn', { /* ... */ })

  注册全局组件就是这样写：

el: 'app',
data() {
    return{
        ....
    }
},
component: {
    'test-cpn': {/* ... */ }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化基本使用</title>
    <style>
        .some-style{
            color: red;
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>This is a piece of app message!</h1>
        <!-- 3.使用组件 -->
        <test-cpn></test-cpn>
        <test-cpn></test-cpn>

        <!-- 使用单标签 -->
        <test-cpn/>
    </div>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            //2.注册组件
            // Vue.component('组件的标题','构造器对象')
            components: {
                'test-cpn': {
                    // template --> 定义组件的HTML模板
                    template: `
                    <div>
                        <h2>组件标题</h2>
                        <p class="some-style">组件内容</p>
                        {{mes}}
                        <button @click="handleBtn">点我你就知道了</button>
                    </div>
                    `,
                    // data --> 用于存放组件的数据
                    data() {
                        return {
                            mes: 'hello vue component!'
                        }
                    },
                    // methods --> 组件的方法都写到这里面
                    methods: {
                        handleBtn() {
                            console.log('这不就是组件的行为了吗？讨厌！')
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

  当然，这样写代码结构乱七八糟的，我们应该把html代码抽离出去，这样html代码和js代码不会混在一起了，看着也是舒服一点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化基本使用</title>
    <style>
        .some-style{
            color: red;
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>This is a piece of app message!</h1>
        <!-- 3.使用组件 -->
        <test-cpn></test-cpn>
        <test-cpn></test-cpn>

        <!-- 使用单标签 -->
        <test-cpn/>
    </div>
    <!-- vue组件结构模板 -->
    <template id="test-cpn">
        <div>
            <h2>组件标题</h2>
            <p class="some-style">组件内容</p>
            {{mes}}
            <button @click="handleBtn">点我你就知道了</button>
        </div>
    </template>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            //2.注册组件
            // Vue.component('组件的标题','构造器对象')
            components: {
                'test-cpn': {
                    // template --> 定义组件的HTML模板
                    template: '#test-cpn',
                    // data --> 用于存放组件的数据
                    data() {
                        return {
                            mes: 'hello vue component!'
                        }
                    },
                    // methods --> 组件的方法都写到这里面
                    methods: {
                        handleBtn() {
                            console.log('这不就是组件的行为了吗？讨厌！')
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

  丝毫不影响我们程序运行、而且代码看起来也舒舒服服的~

组件通信

父传子

  现在我们知道组件有data、有methods、有computed、watch、等。其实组件还有一个重要的属性props

  props跟data差不多，是用于存放组件中用到的数据的，但是props中的数据是从父组件中传递过来的，并且只能在父组件中修改props中的数据，子组件只能用props中的数据，不能直接修改props中的数据。 而data中的数据是组件自己定义的。组件也可以直接修改data中的数据。

  哪个是父组件？哪个又是子组件呢？在上面例子中，test-cpn 就是子组件， vm 实例就是父组件，因为我们在 vm 实例上注册了 test-cpn 组件并且使用它。

  那如何从父组件传递数据呢？show code！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化基本使用</title>
    <style>
        .some-style{
            color: red;
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>This is a piece of app message!</h1>
        <!-- 3.使用组件，并且送给它一段话 -->
        <test-cpn msg="我是你爹！"></test-cpn>
        <!-- 3.使用组件，我没什么要给它的 -->
        <test-cpn></test-cpn>

        <!-- 使用组件，使用单标签，我也没什么要给它的 -->
        <test-cpn/>
    </div>
    <!-- vue组件结构模板 -->
    <template id="test-cpn">
        <div>
            <h2>组件标题</h2>
            <p class="some-style">组件内容</p>
            {{mes}}
            <button @click="handleBtn">点我你就知道了</button>
            <h4>让我看看父组件给我传来了什么消息：{{msg}}</h4>
        </div>
    </template>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            //2.注册组件
            // Vue.component('组件的标题','构造器对象')
            components: {
                'test-cpn': {
                    // template --> 定义组件的HTML模板
                    template: '#test-cpn',
                    // props --> 用于接收从父组件传递来的数据
                    props: ['msg'],
                    // data  --> 用于存放组件的数据
                    data() {
                        return {
                            mes: 'hello vue component!'
                        }
                    },
                    // methods --> 组件的方法都写到这里面
                    methods: {
                        handleBtn() {
                            console.log('这不就是组件的行为了吗？讨厌！')
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

  看吧！就是这么简单，只需要在父组件中使用子组件时，写一个属性和值就可以了。属性就是在子组件定义好的数据，值就是你想要传的数据。上述例子中，我们在父组件使用了三次 test-cpn 组件，但是只有第一次使用的时候传递msg，而第二次和第三次使用的时候都没有传递msg，所以第一次的时候才会出现msg的数据，而第二次和第三次并没有出现。

  props只能接收字符串吗？呵，它可不止这么简单，它还可以接收数字、数字、对象，而且还可以对要传递的数据进行类型限制、默认值，等校验。也可以动态传递。

props有两种写法：如果对从组件传递的数据不需要类型限制等校验，那么props写成数组形式就好了；如果对从组件传递的数据需要类型限制等校验，那么props就要写成对象形式

// 不需要校验时
props: ['a', 'b', 'c']

// 需要校验时
props: {
    a: {...},
    b: {...},
    c: {...}
}

  不校验的写法我们已经写过了，接下来就是不校验的写法了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化基本使用</title>
    <style>
        .some-style{
            color: red;
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div id="app">
      <h1>This is a piece of app message!</h1>
      <!-- 3.使用组件，并且送给它一段话 -->
      <test-cpn msg="我是你爹！"></test-cpn>
      <!-- 3.使用组件，并且动态传递了一个数组给它-->
      <test-cpn :fm="fourMasterpieces"></test-cpn>

      <!-- 使用组件，使用单标签，我也没什么要给它的 -->
      <test-cpn/>
    </div>
    <!-- vue组件结构模板 -->
    <template id="test-cpn">
      <div>
        <h2>组件标题</h2>
        <p class="some-style">组件内容</p>
        {{mes}}
        <button @click="handleBtn">点我你就知道了</button>
        <h4>让我看看父组件给我传来了什么消息：{{msg}}</h4>
        <ul>
          <li v-for="item in fm">{{item}}</li>
        </ul>
      </div>
    </template>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
          data: {
            fourMasterpieces: ['西游记', '三国演义', '水浒传', '红楼梦']
          },
        //2.注册组件
        // Vue.component('组件的标题','构造器对象')
        components: {
          'test-cpn': {
           // template --> 定义组件的HTML模板
          template: '#test-cpn',
          // props --> 用于接收从父组件传递来的数据
          props: {
            msg: {
              type: String, // 类型限制
              default: '我是默认滴数据' // 默认值
            },
            fm: {
              type: Array // 类型限制
            }
          },
          // data  --> 用于存放组件的数据
          data() {
            return {
              mes: 'hello vue component!'
            }
          },
          // methods --> 组件的方法都写到这里面
          methods: {
            handleBtn() {
              console.log('这不就是组件的行为了吗？讨厌！')
            }
          }
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

  当我们进行类型等校验之后，父组件传的数据类型不对，数据还是能显示出来，但就会报错。 一下代码我只截取一部分

<div id="app">
    <h1>This is a piece of app message!</h1>
    <!-- 3.使用组件，并且送给它一段话 -->
    <test-cpn msg="我是你爹！" :count="num"></test-cpn>
    <!-- 3.使用组件，并且动态传递了一个数组给它-->
    <test-cpn :fm="fourMasterpieces"></test-cpn>

    <!-- 使用组件，使用单标签，我也没什么要给它的 -->
    <test-cpn/>
</div>
<!-- vue组件结构模板 -->
<template id="test-cpn">
    <div>
    <h2>组件标题</h2>
    <p class="some-style">组件内容</p>
    {{mes}}
    <button @click="handleBtn">点我你就知道了</button>
    <h4>让我看看父组件给我传来了什么消息：{{msg}}{{count}}</h4>
    <ul>
        <li v-for="item in fm">{{item}}</li>
    </ul>
    </div>
</template>
data: {
  num: '100',
  fourMasterpieces: ['西游记', '三国演义', '水浒传', '红楼梦']
},

在这里插入图片描述

  这是就可以写多个可能的类型，这样就不对报错了！

props: {
  ...
  count: {
    type: [Number, String]
  },
  ...
}

  也可以设置必传数据，如果设置必传数据，那每一次使用都要传，如果父组件不传就会报错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化基本使用</title>
    <style>
        .some-style{
            color: red;
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div id="app">
      <h1>This is a piece of app message!</h1>
      <!-- 由于parentName是必须数据， 所以每次有的时候都要传进去 -->
      <!-- 3.使用组件，并且送给它一段话,并且传了动态数据,-->
      <test-cpn msg="我是你爹！" :count="num" :parent-name="name"></test-cpn>
      <!-- 3.使用组件，并且动态传递了两个数组给它-->
      <test-cpn :fm="fourMasterpieces" :parent-name="name"></test-cpn>

      <!-- 3.使用组件，使用单标签，并且传了动态数据 --->
      <test-cpn :parent-name="name"/>
    </div>
    <!-- vue组件结构模板 -->
    <template id="test-cpn">
      <div>
        <h2>组件标题</h2>
        <p>我的爸爸叫：{{parentName}}</p>
        <p class="some-style">组件内容</p>
        {{mes}}
        <button @click="handleBtn">点我你就知道了</button>
        <h4>让我看看父组件给我传来了什么消息：{{msg}}{{count}}</h4>
        <ul>
          <li v-for="item in fm">{{item}}</li>
        </ul>
      </div>
    </template>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
          data: {
            num: '100',
            name: 'vm实例',
            fourMasterpieces: ['西游记', '三国演义', '水浒传', '红楼梦']
          },
        //2.注册组件
        // Vue.component('组件的标题','构造器对象')
        components: {
          'test-cpn': {
           // template --> 定义组件的HTML模板
          template: '#test-cpn',
          // props --> 用于接收从父组件传递来的数据
          props: {
            msg: {
              type: String, // 类型限制
              default: '我是默认滴数据' // 默认值
            },
            count: {
              type: [Number, String]
            },
            fm: {
              type: Array // 类型限制
            },
            parentName: {
              type: String,
              required: true // 是否必须传递
            }
          },
          // data  --> 用于存放组件的数据
          data() {
            return {
              mes: 'hello vue component!'
            }
          },
          // methods --> 组件的方法都写到这里面
          methods: {
            handleBtn() {
              console.log('这不就是组件的行为了吗？讨厌！')
            }
          }
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

  上面说过在组件里面不能直接修改props中的值，我来添加一个按钮，点击按钮改变props中的count为0，它依然能改变，但是报错了，Vue大概意思是不能在组件里直接修改props中的状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化基本使用</title>
    <style>
        .some-style{
            color: red;
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div id="app">
      <h1>This is a piece of app message!</h1>
      <!-- 3.使用组件，并且送给它一段话,并且传了动态数据 -->
      <test-cpn msg="我是你爹！" :count="num" :parent-name="name"></test-cpn>
      <!-- 3.使用组件，并且动态传递了两个数组给它-->
      <test-cpn :fm="fourMasterpieces" :parent-name="name"></test-cpn>

      <!-- 使用组件，使用单标签，并且传了动态数据 --->
      <test-cpn :parent-name="name"/>
    </div>
    <!-- vue组件结构模板 -->
    <template id="test-cpn">
      <div>
        <h2>组件标题</h2>
        <p>我的爸爸叫：{{parentName}}</p>
        <p class="some-style">组件内容</p>
        {{mes}}
        <button @click="handleBtn">点我你就知道了</button>
        <button @click="changePropsValue">修改props中的值</button>
        <h4>让我看看父组件给我传来了什么消息：{{msg}}{{count}}</h4>
        <ul>
          <li v-for="item in fm">{{item}}</li>
        </ul>
      </div>
    </template>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
          data: {
            num: '100',
            name: 'vm实例',
            fourMasterpieces: ['西游记', '三国演义', '水浒传', '红楼梦']
          },
        //2.注册组件
        // Vue.component('组件的标题','构造器对象')
        components: {
          'test-cpn': {
           // template --> 定义组件的HTML模板
          template: '#test-cpn',
          // props --> 用于接收从父组件传递来的数据
          props: {
            msg: {
              type: String, // 类型限制
              default: '我是默认滴数据' // 默认值
            },
            count: {
              type: [Number, String]
            },
            fm: {
              type: Array // 类型限制
            },
            parentName: {
              type: String,
              required: true // 是否必须
            }
          },
          // data  --> 用于存放组件的数据
          data() {
            return {
              mes: 'hello vue component!'
            }
          },
          // methods --> 组件的方法都写到这里面
          methods: {
            handleBtn() {
              console.log('这不就是组件的行为了吗？讨厌！')
            },
            changePropsValue() {
              this.count = 0
            }
          }
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

子传父

  既然有父传子，那么就有子传父。子传父稍微比父传子更复杂一点，当时我我在学的时候，脑子也是嗡嗡的，后面多敲一点就好了，其实不复杂，等你多敲几遍，那你就会觉得跟呼吸一样简单。说白了，子传父就是发射一个自定义事件。

  上述例子，直接在组件中修改props中的状态，是不行滴~由于props中的数据是从父组件中传过来的，所以应当在父组件中修改它才是最棒的方式！所以可以在子组件中发射一个自定义事件，然后在父组件中使用这自定义事件可以改变传递的数据，数据一改变，子组件就会第一时间收到新的数据。show code！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化基本使用</title>
    <style>
        .some-style{
            color: red;
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div id="app">
      <h1>This is a piece of app message!</h1>
      <!-- 3.使用组件，并且送给它一段话,并且传了动态数据,
             并接收了自定义事件 -->
      <test-cpn
        msg="我是你爹！"
        :count="num"
        :parent-name="name"
        @change-props-value="hanldeValue"
        ></test-cpn>
      <!-- 3.使用组件，并且动态传递了两个数组给它-->
      <test-cpn :fm="fourMasterpieces" :parent-name="name"></test-cpn>

      <!-- 使用组件，使用单标签，并且传了动态数据 --->
      <test-cpn :parent-name="name"/>
    </div>
    <!-- vue组件结构模板 -->
    <template id="test-cpn">
      <div>
        <h2>组件标题</h2>
        <p>我的爸爸叫：{{parentName}}</p>
        <p class="some-style">组件内容</p>
        {{mes}}
        <button @click="handleBtn">点我你就知道了</button>
        <button @click="changePropsValue">修改props中的值</button>
        <h4>让我看看父组件给我传来了什么消息：{{msg}}{{count}}</h4>
        <ul>
          <li v-for="item in fm">{{item}}</li>
        </ul>
      </div>
    </template>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
          data: {
            num: '100',
            name: 'vm实例',
            fourMasterpieces: ['西游记', '三国演义', '水浒传', '红楼梦']
          },
          // vm实例方法的集合
          methods: {
            hanldeValue(){
              this.num--;
            }
          },
          //2.注册组件
          // component('组件的标题','构造器对象')
          components: {
            'test-cpn': {
             // template --> 定义组件的HTML模板
            template: '#test-cpn',
            // props --> 用于接收从父组件传递来的数据
            props: {
              msg: {
                type: String, // 类型限制
                default: '我是默认滴数据' // 默认值
              },
              count: {
                type: [Number, String]
              },
              fm: {
                type: Array // 类型限制
              },
              parentName: {
                type: String,
                required: true // 是否必须
              }
            },
            // data  --> 用于存放组件的数据
            data() {
              return {
                mes: 'hello vue component!'
              }
            },
            // methods --> 组件的方法都写到这里面
            methods: {
              handleBtn() {
                console.log('这不就是组件的行为了吗？讨厌！')
              },
              changePropsValue() {
                // $emit --> 发射自定义事件
                this.$emit('change-props-value')
              }
            }
          }
        }
      })
    </script>
</body>
</html>

  上述例子给子组件’(修改props中的值)'按钮绑定一个点击事件(changePropsValue)，然后在事件处理中我们通过this.$emit发发射一个自定义事件change-props-value。然后在父组件中接收change-props-value自定义事件,通过hanldeValue方法修改父组件中num的值，num的值一改变，子组件就会第一时间收到改变后的值，直接渲染到页面了。

值得注意的是，这里的自定义事件我为什么不写小驼峰命名呢？这里官网说了，HTML 是大小写不敏感的，所以他推荐我们使-代替 小驼峰

在这里插入图片描述

  当然，子组件在发射自定义事件时，也可以传递参数，直接this.$emit('事件名', 一些参数, 另外的一些参数) 传递参数

changePropsValue() {
  // $emit --> 发射自定义事件
  this.$emit('change-props-value', 10)
}

<!-- 3.使用组件，并且送给它一段话,并且传了动态数据,
              并接收了自定义事件 -->
<test-cpn
  msg="我是你爹！"
  :count="num"
  :parent-name="name"
  @change-props-value="hanldeValue"
  ></test-cpn>


// 直接在hanldeValue方法接收参数
hanldeValue(data) {
  console.log(data);
  this.num -= data;
}

在这里插入图片描述
  学到这里是不是感觉脑子乱七八糟的，懵逼是正常的，动动您的手敲几遍，你就会发现突然豁然开朗！还不快去 ！打！代！码！，最后再送你一张图：
在这里插入图片描述

vernin
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅析vue component 组件使用
08-31
本篇文章主要介绍了vue component 组件使用 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【Vue】组件（component）
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
07-13 6784
文章目录一、什么是组件二、为什么需要组件三、创建一个组件四、组件的复用五、通过 Prop 向子组件传递数据六、通过插槽分发内容七、动态组件八、注意事项 一、什么是组件 所谓的组件，其实就是我们通过vue自定义的一些标签。在自定义的标签中，其实已经封装好了一些自定义的特定的HTML代码。 你也许会疑问，为什么要特意的将HTML代码封装起来。其实是这样的，我们使用组件一方面可以减少HTML的代码（视觉上是这样的），另一方面可以极大的提高代码的复用。 你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它
Vue实战之Vue中组件(component)
9.冄2.7.號的博客
08-01 1万+
es6基本语法及使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之系列课程</title> </head> <body> <div id="app"> <h1>{{msg}}</h1> <!-- ES6: EcmaScri
Vue组件（Component）
leva的博客
02-08 2323
在正式介绍组件前，先看一个Vue组件的简单示例感受一下，代码如下：组件是可复用的Vue实例，且带有一个名字，在这个示例中组件名字是button-counter。可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义标签来使用，代码如下：Web的组件其实就是页面组成的一部分，好比是计算机中的每一个硬件（如硬盘、键盘、鼠标等），它具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，从而变成一个完整的应用。
vue从入门到进阶：组件Component详解（六）
嘿嘿
04-18 1656
一.什么是组件？ 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。 所有的Vue 组件同时也都是Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。 二.注册组件 全局注册 html代码： <div id="example"...
Vue之Vue.component解析
玉案轩窗的博客
12-01 4万+
前言 本篇文章打算分析梳理下Vue提供的创建组件的方法，打开Vue官网，在API中只有Vue.component和Vue.extend提供组件的创建。 严格意义上是这么说，但是在实际项目中常使用局部注册以及文件即组件这种方式来实现开发，这里先不讨论这种方式背后的处理，主要放在Vue.component和Vue.extend这两个API的逻辑处理。 具体梳理 结合简单实例来梳理下整个的处理逻辑，实例...
Vue中component标签的了解
Amy_ly的博客
07-26 4423
</div>data() {return {// show 表示要展示的组件的名字show: 'A'},A,B
vue内置动态组件component使用详解
热门推荐
蓑笠翁
03-05 4万+
vue动态组件使用介绍，包括动态组件切换，动态组件切换数据缓存等
VUE-组件（component）
damadashen的博客
05-20 8038
VUE组件介绍
Vue组件化之VueComponent介绍
qq_40837310的博客
02-14 1万+
简介 这篇文章主要介绍的是VueComponent函数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VueComponent</title> </head&g
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3852
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue component组件使用方法详解
08-29
主要为大家详细介绍了vue component组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中component组件的props使用详解
08-29
本篇文章主要介绍了vue中component组件的props使用详解，这里整理了详细的用法，具有一定的参考价值，有兴趣的可以了解一下
解决vue的router组件component在import时不能使用变量问题
10-15
主要介绍了解决vue的router组件component在import时不能使用变量问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈Vue内置component组件的应用场景
08-27
主要介绍了浅谈Vue内置component组件的应用场景，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 442
步骤很详细，直接上教程……
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 234
vue echarts 柱状图 堆叠柱状图
vue 实现级联选择器功能
清音的博客
04-22 544
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue component is 组件源码
05-10
Vue.js 是一种用于构建用户界面的开源渐进式 JavaScript 框架，具有轻量级、易学习、高效的特点。Vue.js 中的组件是指可重用的代码单元，它具有独立的 CSS 样式、可接受参数和事件，可以在应用程序的多个部分中使用。Vue.js 组件是 Vue.js 构建用户界面的基本块，它可以被看做是如何将应用程序分解为可重用的代码块。 在 Vue.js 中，组件源码不仅包括 HTML 和 CSS 代码，还包括 JavaScript 代码。实际上，在组件源码中，HTML 和 CSS 代码是与 JavaScript 代码相结合的，因为 Vue.js 组件是由 Vue.js 提供的特殊元素构成的树形结构。每个组件都有一个唯一的名字，该名字用于将组件与应用程序的其他部分区分开来。Vue.js 组件支持 props、events、methods 等多种特性，这些特性可以让我们更好地定制组件，使其适应不同的业务需求。 Vue.js 的组件源码具有结构简单、易于理解、可维护性强等优点。在应用程序中，我们通常会使用自定义组件来实现更加灵活的 UI 开发。如果您想要了解更多关于 Vue.js 的组件源码的知识，请参考 Vue.js 官方文档，深入学习 Vue.js 组件的使用方法和原理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值