search

博客列表 >PartIII 08 vue中的组件及传参（0909wed）

PartIII 08 vue中的组件及传参（0909wed）

老黑
老黑原创
2020年09月12日 22:09:19915浏览

主要内容：vue中的组件及传参

  1. 事件类型-通过@click=来绑定对应的方法
  2. 注册组件（全局组件及局部组件）
  3. 通过template来进行模块优化
  4. 传参方法
    • 使用自定义属性向组件传参
    • 使用data()向组件传参
    • 混合传参
  5. 传参方向
    • 父组件向子组件传参
    • 子组件验证从父组件接收的参数
    • 子组件向父组件传递消息（$emit）

1. 事件类型

  • 通过@click=来绑定对应的方法
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>事件</title>
  7.     <script src="../lib/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <!-- v-on:事件类型 -->
  12.       <p>
  13.         <!-- <button v-on:click="num++">点赞</button>已被点赞<span style="color:red"> {{num}} </span> 次</span> -->
  14.         <button @click="num++">点赞</button>已被点赞<span style="color:red"> {{num}} </span> 次</span>
  15.       </p>
  17.       <p>
  18.         <button @click="liked">点赞</button>已被点赞<span style="color:red"> {{num}} </span> 次</span>
  19.       </p>
  21.       <p>
  22.           <button @click="whoami('朱老师')">我是谁? </button><span>{{name}}</span>
  23.       </p>
  25.       <!-- 如果要访问原生的事件对象Event, 第一使用固定的参数名$event, 而且必须是最后一个参数(多个参数时) -->
  26.       <ul @click="show($event)">
  27.           <li v-for="item of animal">{{item}}</li>
  28.       </ul>
  29.     </div>
  31.     <script>
  32.       const vm = new Vue({
  33.         el: ".app",
  34.         data: {
  35.           num: 3456,
  36.           name:null,
  37.           animal: ['小猪', '小狗', '小猫'],
  38.         },
  39.         //事件方法
  40.         methods: {
  41.             liked() {
  42.                 this.num++;
  43.             },
  44.             whoami(name){
  45.                 this.name = name;
  46.             },
  47.             show(event) {
  48.                 // 这个地方传参event不用加$，但前面的时候需要加。
  49.                 // console.log(event.target);
  50.                 // console.log(event.currentTarget);
  51.                 alert(`您喜欢的小动物是: ${event.target.innerHTML}`);
  52.             }
  53.         },  
  54.       });
  55.     </script>
  56.   </body>
  57. </html>

2. 注册组件

  • 全局组件：在所有的vue实例中都可以用
  • 局部组件：只限于在当前实例中使用
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <script src="../lib/vue.js"></script>
  7.     <title>注册组件</title>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <!-- 加载到页面中的挂载点中 -->
  12.       <global-component></global-component>
  13.       <!-- 局部组件 -->
  14.       <local-component1></local-component1>
  15.       <local-component2></local-component2>
  16.     </div>
  17.     <hr />
  18.     <div class="app2">
  19.       <!-- 加载到页面中的挂载点中 -->
  20.       <global-component></global-component>
  22.       <!-- <local-component1></local-component1> -->
  23.     </div>
  24.     <script>
  25.       // 1. 全局组件:在所有的vue实例中都可以用
  26.       // Vue.component(组件标签, 组件的模板内容)
  27.       Vue.component("global-component", {
  28.         //   template: 用户自定义的组件模板的内容
  29.         template: "<p>我是一个全局组件</p>",
  30.       });
  31.       const vm = new Vue({
  32.         el: ".app",
  33.         // 局部组件: 只限于在当前实例中使用
  34.         components: {
  35.           "local-component1": {
  36.             template: "<p>我是一个局部组件1</p>",
  37.           },
  38.           "local-component2": {
  39.             template: "<p>我是一个局部组件2</p>",
  40.           },
  41.         },
  42.       });
  44.       const vm2 = new Vue({
  45.         el: ".app2",
  46.       });
  47.     </script>
  48.   </body>
  49. </html>

3. 组件模块的优化

  • 通过<template></template>中的 id 在vue.component中进行对应绑定
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <script src="../lib/vue.js"></script>
  7.     <title>组件模板的优化</title>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <global-component></global-component>
  12.       <local-component></local-component>
  13.     </div>
  15.     <!-- <script type="x-template" id="g-com1">
  16.       <div class="cart">
  17.         <h3>购物车</h3>
  18.         <ul>
  19.           <li>汽车</li>
  20.           <li>裤子</li>
  21.           <li>苹果</li>
  22.         </ul>
  23.       </div>
  24.     </script> -->
  26.     <template id="g-com1">
  27.       <div class="cart">
  28.         <h3>购物车</h3>
  29.         <ul>
  30.           <li>火车</li>
  31.           <li>裤子</li>
  32.           <li>苹果</li>
  33.         </ul>
  34.       </div>
  35.     </template>
  37.     <!-- 局部组件 -->
  38.     <template id="l-com1">
  39.       <p>Hello 我是局部组件对应的模板内容</p>
  40.     </template>
  42.     <script>
  43.       // 全局组件
  44.       Vue.component("global-component", {
  45.         // template: `
  46.         // <div class="cart">
  47.         //   <h3>购物车</h3>
  48.         //   <ul>
  49.         //     <li>汽车</li>
  50.         //     <li>裤子</li>
  51.         //     <li>苹果</li>
  52.         //   </ul>
  53.         // </div>
  54.         // `,
  55.         // 这里要有一个标识和上面的script type="x-template"进行绑定
  56.         template: "#g-com1",
  57.       });
  58.       const vm = new Vue({
  59.         el: ".app",
  60.         // 局部组件
  61.         components: {
  62.           "local-component": {
  63.             template: "#l-com1",
  64.           },
  65.         },
  66.       });
  67.     </script>
  68.   </body>
  69. </html>

4. 使用自定义属性向组件传参

  • <template></template>来设置
  • 通过id在vue.component中进行绑定
  • 并通过props: [‘’, ‘’, ‘’]来传参数
  • 最后在dom中通过具体变量名来渲染
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用自定义属性向组件传参</title>
  7.     <script src="../lib/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <!-- 通过属性向组件传参 -->
  12.       <my-component id="1" name="peter" email="peter@php.cn"></my-component>
  13.     </div>
  15.     <template id="user">
  16.       <ul>
  17.         <li>ID: {{id}}</li>
  18.         <li>姓名: {{name}}</li>
  19.         <li>邮箱: {{email}}</li>
  20.       </ul>
  21.     </template>
  22.     <script>
  23.       // 注册组件
  24.       Vue.component("my-component", {
  25.         template: "#user",
  26.         // 在组件中使用props属性来接收通过组件标签的属性传递过来的参数
  27.         props: ["id", "name", "email"],
  28.       });
  29.       const vm = new Vue({
  30.         el: ".app",
  31.       });
  32.     </script>
  33.   </body>
  34. </html>

5. 使用data()向组件传参

  • 与前面不同的是props为空[]
  • 增加了一个data()function，在其中返回具体的赋值，并且将data:{}在vue实例中体现
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用data()向组件传参</title>
  7.     <script src="../lib/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <!-- 通过属性向组件传参 -->
  12.       <my-component></my-component>
  13.     </div>
  15.     <template id="user">
  16.       <ul>
  17.         <li>ID: {{id}}</li>
  18.         <li>姓名: {{name}}</li>
  19.         <li>邮箱: {{email}}</li>
  20.       </ul>
  21.     </template>
  22.     <script>
  23.       // 注册组件
  24.       Vue.component("my-component", {
  25.         template: "#user",
  26.         // 在组件中使用props属性来接收通过组件标签的属性传递过来的参数
  27.         props: [],
  29.         data() {
  30.           return {
  31.             id: 2,
  32.             name: "朱老师",
  33.             email: "peter@php.cn",
  34.           };
  35.         },
  36.       });
  37.       const vm = new Vue({
  38.         el: ".app",
  39.         data: {},
  40.       });
  41.     </script>
  42.   </body>
  43. </html>

6. 使用data()和属性向组件传参

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用data()和属性向组件传参</title>
  7.     <script src="../lib/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <!-- 通过属性向组件传参 -->
  12.       <my-component blog="https://php.cn/hello.html"></my-component>
  13.     </div>
  15.     <template id="user">
  16.       <ul>
  17.         <li>ID: {{id}}</li>
  18.         <li>姓名: {{name}}</li>
  19.         <li>邮箱: {{email}}</li>
  20.         <!-- <li>博客:<a v-bind:href="blog">{{blog}}</a></li> ，下面为简化，去掉了v-bind-->
  21.         <li>博客:<a :href="blog">{{blog}}</a></li>
  22.       </ul>
  23.     </template>
  24.     <script>
  25.       // 注册组件
  26.       Vue.component("my-component", {
  27.         template: "#user",
  28.         // 自定义属性与data()方法共同向组件传参
  29.         props: ["blog"],
  31.         data() {
  32.           return {
  33.             id: 2,
  34.             name: "朱老师",
  35.             email: "peter@php.cn",
  36.           };
  37.         },
  38.       });
  39.       const vm = new Vue({
  40.         el: ".app",
  41.         data: {},
  42.       });
  43.     </script>
  44.   </body>
  45. </html>

7. 父组件向子组件传参

  • 在vue实例中通过data:{user：{}}对象来赋值
  • 通过<template></template>，vue.component来创建子组建并绑定
  • 跟上面在vue.component中的data()function来赋值还是不同的。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>父组件向子组件传参</title>
  7.     <script src="../lib/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <!-- 父组件:唯一的 -->
  11.     <div class="app">
  12.       <!-- 子组件: 可以有多个,可以由全局组件或局部组件充当 -->
  13.       <!-- 用自定义属性来实现父组件向子组件传参 -->
  14.       <my-component :user="user"></my-component>
  15.     </div>
  17.     <template id="user">
  18.       <ul>
  19.         <li>ID: {{user.id}}</li>
  20.         <li>姓名: {{user.name}}</li>
  21.         <li>邮箱: {{user.email}}</li>
  22.       </ul>
  23.     </template>
  24.     <script>
  25.       // 注册: 全局组件
  26.       Vue.component("my-component", {
  27.         template: "#user",
  28.         // 子组件中接收一个父组件传递过来的user对象
  29.         props: ["user"], // 这个地方也需要有
  30.       });
  31.       const vm = new Vue({
  32.         el: ".app",
  33.         data: {
  34.           user: {
  35.             id: 3,
  36.             name: "王文军",
  37.             email: "wwj@php.cn",
  38.           },
  39.         },
  40.       });
  41.     </script>
  42.   </body>
  43. </html>

8. 子组件验证从父组件接收的参数

  • 也就是在props:[]中进行一些基本的限定，例如类型，如果不对就返回false
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>子组件验证从父组件接收的参数</title>
  7.     <script src="../lib/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <!-- 父组件:唯一的 -->
  11.     <div class="app">
  12.       <!-- 子组件: 可以有多个,可以由全局组件或局部组件充当 -->
  13.       <!-- 用自定义属性来实现父组件向子组件传参 -->
  14.       <my-component :user="user" :blog="blog"></my-component>
  15.     </div>
  17.     <template id="user">
  18.       <ul>
  19.         <li>ID: {{user.id}}</li>
  20.         <li>姓名: {{user.name}}</li>
  21.         <li>邮箱: {{user.email}}</li>
  22.         <li>博客: <a :href="blog">{{blog}}</a></li>
  23.       </ul>
  24.     </template>
  25.     <script>
  26.       // 注册: 全局组件
  27.       Vue.component("my-component", {
  28.         template: "#user",
  29.         // 下面这个地方就相当于在做验证，跟前面就有区别了。
  30.         props: {
  31.           user: Object,
  32.           blog: {
  33.             type: String,
  34.             default: "https://www.php.cn/default.html",
  35.           },
  36.         },
  37.       });
  38.       const vm = new Vue({
  39.         el: ".app",
  40.         data: {
  41.           user: {
  42.             id: 3,
  43.             name: "王文军",
  44.             email: "wwj@php.cn",
  45.           },
  46.           blog: "https://www.php.cn/hello.html",
  47.         },
  48.       });
  49.     </script>
  50.   </body>
  51. </html>

9. 子组件向父组件传递消息

  • 子组件向父组件传递消息(全是通过事件,呼叫父组件来响应 $emit)
  • 仍是通过自定义属性进行交互
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>子组件向父组件传递消息</title>
  7.     <script src="../lib/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <my-component
  12.         :product="product"
  13.         @count="total" 
  14.         <!-- count是一个方法，而非一个属性，因此绑定用@，而非：冒号 -->
  15.         <!-- total是一个表达式，然后下一面一行中的total再和父组件中的方法进行绑定-->
  16.         :total="total"
  17.       ></my-component>
  18.       <span style="float: right; margin-right: 50px;"
  19.         >总计: {{totalPrice}} 元</span
  20.       >
  21.     </div>
  23.     <template id="cart">
  24.       <table
  25.         border="1"
  26.         width="80%"
  27.         align="center"
  28.         cellspacing="0"
  29.         cellpadding="5"
  30.       >
  31.         <caption>
  32.           购物车
  33.         </caption>
  34.         <tr bgcolor="lightblue">
  35.           <th>ID</th>
  36.           <th>品名</th>
  37.           <th>单价</th>
  38.           <th>数量</th>
  39.         </tr>
  40.         <tr v-for="item of product"> //这个地方用of或in都可以
  41.           <td>{{item.id}}</td>
  42.           <td>{{item.name}}</td>
  43.           <td>{{item.price}}</td>
  44.           <td><input type="number" v-model="item.num" @change="count" /></td>
  45.           <!-- 这块主要是为了可以修改 -->
  46.         </tr>
  47.       </table>
  48.     </template>
  49.     <script>
  50.       Vue.component("my-component", {
  51.         template: "#cart",
  52.         props: ["product"],
  53.         methods: {
  54.           count() {
  55.             // 向父组件发送消息,调用父组件的total()
  56.             this.$emit("count");
  57.           },
  58.         },
  59.       });
  60.       const vm = new Vue({
  61.         el: ".app",
  62.         data: {
  63.           product: [
  64.             { id: 1, name: "电脑", price: 5000, num: 1 },
  65.             { id: 2, name: "手机", price: 3000, num: 1 },
  66.           ],
  67.           totalPrice: 0,
  68.         },
  70.         mounted() {
  71.           this.total();
  72.         },
  74.         methods: {
  75.           total() {
  76.             this.totalPrice = 0;
  77.             this.forEach((item) => {
  78.               this.totalPrice += item.num * item.price;
  79.             });
  80.           },
  81.         },
  82.       });
  83.       // 子组件向父组件传递消息(全是通过事件,呼叫父组件来响应)
  84.       // 仍是通过自定义属性进行交互
  85.     </script>
  86.   </body>
  87. </html>

" class="reference-link">

上一条：PHP大牛成长之路：laravel的安装与目录介绍下一条：PartIII 07 vue常用指令与语法基础（0908tue）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多