10-组件化开发-CSDN博客

本文链接：https://blog.csdn.net/small_shadow/article/details/113030107

本文详细介绍了Vue.js中的组件化开发，从基础的组件创建、注册与使用，到父子组件间的通信，包括props传递数据和自定义事件实现子传父。还探讨了组件模板的多种写法，如使用script或template标签进行模板分离。此外，讲解了组件数据的正确声明方式，以及如何通过refs实现父组件访问子组件。这些内容全面覆盖了Vue.js组件化的关键知识点。

摘要由CSDN通过智能技术生成

前九个学完，勉强入点门，接下来学vue中非常重要的部分：组件化开发

01-组件化的基本使用

创建组件构造器对象–>注册组件–>使用组件

<body>
    <div id="app">
      <!-- 3,使用组件 -->
      <my-cpn></my-cpn>
      <my-cpn></my-cpn>
      <my-cpn></my-cpn>
      <my-cpn></my-cpn>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      // 1.创建组件构造器对象
      // 调用Vue.extend0创建的是一个组件构造器。
      // 通常在创建组件构造器时,传入template代表我们自定义组件的模板。
      // 该模板就是在使用到组件的地方,要显示的HTML代码。
      // 事实上,这种写法在Vue2.x的文档中几乎已经看不到了,它会直接使用下面我们会讲到的语法糖,但是在很多资料还是会
      // 提到这种方式,而且这种方式是学习后面方式的基础。

      const cpnC = Vue.extend({
        template: `
        <div>
            <h2>我是标题</h2>
            <p>我是内容，哈哈哈哈</p>
            <p>我是内容，呵呵呵呵</p>
        </div>`,
      });
      // 2.注册组件
      // 调用Vue.component(是将刚才的组件构造器注册为一 个组件,并且给它起一 个组件的标签名称。
      // 所以需要传递两个参数: 1、注册组件的标签名2、 组件构造器

      Vue.component("my-cpn", cpnC); //全局组件，都可以使用
      const app = new Vue({
        el: "#app",
        data: {},
        Components: {
          //局部组件，只有挂载的id能用
          // cpn使用组件时的标签名
          cpn: cpnC,
        },
      });
    </script>
  </body>

02-父子组件

<body>
    <div id="app">
      <cpn2></cpn2>
      <cpn1></cpn1>
    </div>
    <script src="../js/vue.js"></script>

    <script>
      // 1.创建第一个组件构造器(子组件)
      const cpnC1 = Vue.extend({
        template: `
          <div>
            <h2>我是标题1</h2>
            <p>我是内容，哈哈哈哈</p>
          </div>`,
      });
      // 2.创建第二个组件构造器(父组件)
      const cpnC2 = Vue.extend({
        template: `
        <div> 
        <h2>我是标题2</h2>
        <p>我是内容，呵呵呵呵</p>
        <cpn1></cpn1> 
        </div> `,
        components: {
          cpn1: cpnC1,
        },
      });
      // root组件
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊",
        },
        components: {
          cpn2: cpnC2,
          cpn1: cpnC1,
        },
      });
    </script>
  </body>

03-组件写法的语法糖

<body>
    <div id="app">
      <cpn1></cpn1>
      <cpn2></cpn2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      //1.全局组件注册的语法糖
      //1.创建组件构造器
      // const cpn1 = Vue，extend( )
      // 2.注册组件
      Vue.component("cpn1", {
        template: `
            <div>
                <h2>我是标题1</h2>
                <p>我是内容，哈哈哈哈</p>
            </div>`,
      });
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊",
        },
        components: {
          cpn2: {
            template: `
            <div>
                <h2>我是标题1</h2>
                <p>我是内容，哈哈哈哈</p>
            </div>`,
          },
        },
      });
    </script>
  </body>

04-组件模板的分离写法

利用script或者template标签，后者使用居多

<body>
    <div id="app">
      <cpn1></cpn1>
      <cpn2></cpn2>
    </div>
    <script src="../js/vue.js"></script>
    <!--1.script标签，注意:类型必须是text/x-template-->
    <script type="text/x-template" id="cpn1">
      <div>
          <h2>我是标题</h2>
          <p>我是内容，哈哈哈</p>
      </div>
    </script>
    <!--2. template标签-->
    <template id="cpn2">
      <div>
        <h2>我是标题</h2>
        <p>我是内容，哈哈哈</p>
      </div>
    </template>

    <script>
      Vue.component("cpn1", {
        template: "#cpn1",
      });
      Vue.component("cpn2", {
        template: "#cpn2",
      });
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊，小影",
          name: "小影",
        },
      });
    </script>
  </body>

05-组件中的数据存储问题

这里使用的data必须是函数

<body>
    <div id="app">
      <cpn1></cpn1>
    </div>
    <script src="../js/vue.js"></script>

    <template id="cpn1">
      <div>
        <h2>{{title}}</h2>
        <p>我是内容，哈哈哈</p>
      </div>
    </template>

    <script>
      Vue.component("cpn1", {
        template: "#cpn1",
        // 注意组件中的data必须是函数
        data() {
          return { title: "小影" };
        },
      });
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊，小影",
          name: "小影",
        },
      });
    </script>
  </body>

06-组件的通信-父组件向子组件传东西

父传子，props

<body>
    <div id="app">
      <cpn :cmovies="movies" :cmessage="message"></cpn>
    </div>
    <script src="../js/vue.js"></script>
    <template id="cpn">
      <div>
        <h2>{{cmovies}}</h2>
        <ul>
          <li v-for="item in cmovies">{{item}}</li>
        </ul>
        <p>{{cmessage}}</p>
      </div>
    </template>

    <script>
      // 父传子，props
      const cpn = {
        template: "#cpn",
        // 数组写法
        // props: ["cmovies", "cmessage"],
        // 对象写法，对象写法可以规定类型
        props:{
          //类型限制
          cmovies:Array,
          cmessage: String,
          //提供默认值
          cmovies:{
            type:String,
            default: 'aaaaaaa'
          }
        }
      };
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊，小影",
          movies: ["海王", "海贼王", "海尔兄弟"],
        },
        components: {
          cpn,
        },
      });
    </script>
  </body>

07-组件的通信-子传父（自定义事件）

子传父，自定义事件

<body>
    <!-- 父组件模板 -->
    <div id="app">
      <!-- 父组件接收发射的事件，并作出对应响应 -->
      <cpn @item-click="cpnClick"></cpn>
    </div>
    <script src="../js/vue.js"></script>
    <!-- 子组件模板 -->
    <template id="cpn">
      <div>
        <button v-for="item in categories" @click="btnClick(item)">
          {{item.name}}
        </button>
      </div>
    </template>

    <script>
      // 子组件
      const cpn = {
        template: "#cpn",
        data() {
          return {
            categories: [
              { id: "aaa", name: "热门推荐" },
              { id: "bbb", name: "手机数码" },
              { id: "ccc", name: "家用家电" },
              { id: "ddd", name: "电脑办公" },
            ],
          };
        },
        methods: {
          btnClick(item) {
            //发射事件
            this.$emit("item-click", item);
          },
        },
      };
      //   父组件
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊，小影",
          movies: ["海王", "海贼王", "海尔兄弟"],
        },
        components: {
          cpn,
        },
        methods: {
          cpnClick(item) {
            console.log(item);
          },
        },
      });
    </script>
  </body>

08-组件的通信-父访问子（childre-refs）

子访问父用parent，其他类似，就不在列举

<body>
    <!-- 父组件模板 -->
    <div id="app">
      <cpn></cpn>
      <cpn></cpn>
      <cpn ref="aaa"></cpn>
      <button @click="btnClick">父组件按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <!-- 子组件模板 -->
    <template id="cpn">
      <div>
        <h2>我是子组件</h2>
      </div>
    </template>
    <script>
      // 子组件
      const cpn = {
        template: "#cpn",
      };
      //   父组件
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊，小影",
          movies: ["海王", "海贼王", "海尔兄弟"],
        },
        components: {
          cpn,
        },
        methods: {
          btnClick() {
            // 1,父组件中的$children可以直接调用子组件
            // console.log(this.$children);
            //2.$refs =>对象类型，默认是一个空的对象ref='bbb'
            console.log(this.$refs.aaa);
          },
        },
      });
    </script>
  </body>