简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Vue组件注册和参数传递

Vue组件注册和参数传递

王佳祥
王佳祥原创
2020年09月10日 20:13:261753浏览

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>事件</title>
  7.     <script src="./lib/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <p>
  12.         <button v-on:click="num++">点赞</button>
  13.         <span style="color: red">已被点赞{{num}} </span><span>次</span>
  14.       </p>
  16.       <p>
  17.         <button v-on:click="liked">点赞</button>
  18.         <span style="color: red">已被点赞{{num}} </span><span>次</span>
  19.       </p>
  20.       <p>
  21.         <button @click="whoami('学生')">我是谁？</button>
  22.         <span>{{name}}</span>
  23.       </p>
  24.       <!-- 如果要访问原生的事件对象Event,第一使用固定的参数名$event,而且必须是最后一个参数（多个参数时） -->
  25.       <!-- 声明时要加$ $event 接收时不用加$ -->
  26.       <ul @click="show($event)">
  27.         <li v-for="item of animal">{{item}}</li>
  28.       </ul>
  29.     </div>
  30.     <script>
  31.       const vm = new Vue({
  32.         el: ".app",
  33.         data: {
  34.           num: 100,
  35.           name: null,
  36.           animal: ["野猪", "老虎", "狮子"],
  37.         },
  38.         methods: {
  39.           liked() {
  40.             this.num++;
  41.           },
  42.           whoami(name) {
  43.             this.name = name;
  44.           },
  45.           show(event) {
  46.             console.log(event.target);
  47.             console.log(event.currentTarget);
  48.             alert(`您喜欢的动物是：${event.target.innerHTML}`);
  49.           },
  50.         },
  51.       });
  52.     </script>
  53.   </body>
  54. </html>

二、注册组件

  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.       <global-component></global-component>
  13.       <global-component1></global-component1>
  14.     </div>
  15.     <div class="app2">
  16.       <!-- 加载到页面的挂载点中 -->
  17.       <global-component></global-component>
  18.       <global-component1></global-component1>
  19.     </div>
  20.     <script>
  21.       //全局组件:在所有的Vue实例中都可以用
  22.       //Vue.component(组件标签，组件的模板内容)
  23.       //组件声明
  24.       Vue.component("global-component", {
  25.         //template:用户自定义的组件模板的内容
  26.         template: "<p>我是一个全局组件</p>",
  27.       });
  28.       const vm = new Vue({
  29.         el: ".app",
  30.         data: {},
  31.         components: {
  32.           "global-component1": {
  33.             template: "<p>我是一个局部组件</p>",
  34.           },
  35.         },
  36.       });
  37.       const vm2 = new Vue({
  38.         el: ".app2",
  39.         data: {},
  40.       });
  41.     </script>
  42.   </body>
  43. </html>

三、模板组件的优化

  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.       <global-component></global-component>
  12.       <local-component></local-component>
  13.     </div>
  14.     <!-- <script type="x-template" id="g-com1">
  15.       <div class="cart">
  16.         <h3>购物车</h3>
  17.           <ul>
  18.               <li>汽车</li>
  19.               <li>飞机</li>
  20.               <li>火车</li>
  21.           </ul>
  22.       </div>
  23.     </script> -->
  24.     <template id="g-com1">
  25.       <div class="cart">
  26.         <h3>购物车</h3>
  27.         <ul>
  28.           <li>冰箱</li>
  29.           <li>电脑</li>
  30.           <li>手机</li>
  31.         </ul>
  32.       </div>
  33.     </template>
  35.     <!-- 局部组件 -->
  36.     <template id="l-com1">
  37.       <div>
  38.         <span>我是局部组件对应的模板内容</span>
  39.       </div>
  40.     </template>
  41.     <script>
  42.       //全局组件:在所有的Vue实例中都可以用
  43.       Vue.component("global-component", {
  44.         /* template: `
  45.         <h3>购物车</h3>
  46.         <div class="cart">
  47.             <ul>
  48.                 <li>玩具汽车</li>
  49.                 <li>玩具飞机</li>
  50.                 <li>玩具火车</li>
  51.             </ul>
  52.         </div>
  53.         `, */
  54.         template: "#g-com1",
  55.       });
  56.       const vm = new Vue({
  57.         el: ".app",
  58.         data: {},
  59.         components: {
  60.           "local-component": {
  61.             template: "#l-com1",
  62.           },
  63.         },
  64.       });
  65.     </script>
  66.   </body>
  67. </html>

四、使用属性向组件传参

  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>
  14.     <template id="user">
  15.       <ul>
  16.         <li>ID:{{id}}</li>
  17.         <li>姓名:{{name}}</li>
  18.         <li>邮箱:{{email}}</li>
  19.       </ul>
  20.     </template>
  21.     <script>
  22.       //注册全局组件
  23.       Vue.component("my-component", {
  24.         template: "#user",
  25.         //在组件中使用props属性来接收通过组件标签的属性传递过来的参数
  26.         props: ["id", "name", "email"],
  27.       });
  28.       const vm = new Vue({
  29.         el: ".app",
  30.         data: {},
  31.         components: {},
  32.       });
  33.     </script>
  34.   </body>
  35. </html>

五、通过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.       <my-component></my-component>
  12.     </div>
  13.     <template id="user">
  14.       <ul>
  15.         <li>ID:{{id}}</li>
  16.         <li>姓名:{{name}}</li>
  17.         <li>邮箱:{{email}}</li>
  18.       </ul>
  19.     </template>
  20.     <script>
  21.       //注册全局组件
  22.       Vue.component("my-component", {
  23.         template: "#user",
  24.         props: [],
  25.         data() {
  26.           return {
  27.             id: 2,
  28.             name: "孙悟空",
  29.             email: "wukong@php.cn",
  30.           };
  31.         },
  32.       });
  33.       const vm = new Vue({
  34.         el: ".app",
  35.         data: {},
  36.         components: {},
  37.       });
  38.     </script>
  39.   </body>
  40. </html>

六、使用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.       <my-component blog="https://php.cn/hello.html"></my-component>
  12.     </div>
  13.     <template id="user">
  14.       <ul>
  15.         <li>ID:{{id}}</li>
  16.         <li>姓名:{{name}}</li>
  17.         <li>邮箱:{{email}}</li>
  18.         <li>博客:<a v-bind:href="blog">{{blog}}</a></li>
  19.       </ul>
  20.     </template>
  21.     <script>
  22.       //注册全局组件
  23.       Vue.component("my-component", {
  24.         template: "#user",
  25.         //自定义属性与data()方法共同向组件传参
  26.         props: ["blog"],
  27.         data() {
  28.           return {
  29.             id: 3,
  30.             name: "张三丰",
  31.             email: "sanfeng@php.cn",
  32.           };
  33.         },
  34.       });
  35.       const vm = new Vue({
  36.         el: ".app",
  37.         data: {},
  38.         components: {},
  39.       });
  40.     </script>
  41.   </body>
  42. </html>

七、父组件向子组件传参，子组件接受并验证

  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>
  16.     <template id="user">
  17.       <ul>
  18.         <li>ID:{{user.id}}</li>
  19.         <li>姓名:{{user.name}}</li>
  20.         <li>邮箱:{{user.email}}</li>
  21.         <li>博客:<a :href="blog">{{blog}}</a></li>
  22.       </ul>
  23.     </template>
  24.     <script>
  25.       //注册全局组件
  26.       Vue.component("my-component", {
  27.         template: "#user",
  28.         //props: ["user"],
  29.         props: {
  30.           user: Object,
  31.           blog: {
  32.             type: String,
  33.             default: "https://www.php.cn/default.html",
  34.           },
  35.         },
  36.       });
  37.       const vm = new Vue({
  38.         el: ".app",
  39.         data: {
  40.           user: {
  41.             id: 3,
  42.             name: "唐三藏",
  43.             email: "tang@php.cn",
  44.           },
  45.           blog: "https://www.php.cn/hello.html",
  46.         },
  47.         components: {},
  48.       });
  49.     </script>
  50.   </body>
  51. </html>

八、子组件向父组件传递消息

  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.       <!-- :product="product" 父组件到子组件的过程 -->
  15.       <!-- :total="total"子组件到父组件的过程 -->
  16.       <my-component
  17.         :product="product"
  18.         @count="total"
  19.         :total="total"
  20.       ></my-component>
  21.       <span>总计：{{totalPrice}} 元</span>
  22.     </div>
  23.     <template id="cart">
  24.       <table
  25.         border="1px"
  26.         cellspacing="0px"
  27.         cellpadding="10px"
  28.         width="80%"
  29.         align="center"
  30.       >
  31.         <caption>
  32.           购物车
  33.         </caption>
  34.         <tr style="background-color: cadetblue">
  35.           <th>ID</th>
  36.           <th>品名</th>
  37.           <th>单价</th>
  38.           <th>数量</th>
  39.         </tr>
  40.         <tr v-for="item of product">
  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.         </tr>
  46.       </table>
  47.     </template>
  48.     <script>
  49.       //注册全局组件
  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: 2000, num: 1 },
  66.           ],
  67.           totalPrice: 0,
  68.         },
  69.         mounted() {
  70.           this.total();
  71.         },
  72.         methods: {
  73.           total() {
  74.             this.totalPrice = 0;
  75.             this.product.forEach((item) => {
  76.               this.totalPrice += item.num * item.price;
  77.             });
  78.           },
  79.         },
  80.       });
  81.       //子组件
  82.     </script>
  83.   </body>
  84. </html>

学习总结

1.事件

  • v-on 指令监听 DOM 事件，并在触发时运行 JavaScript 代码

  • 如果要访问原生的事件对象Event,使用固定的参数名$event,而且必须是最后一个参数（多个参数时）

  • 可以简写成：@:click

  • 事件修饰符：

    .stop阻止单击事件继续传播

    .prevent提交事件不再重载页面

    .capture添加事件监听器时使用事件捕获模式

    .self只当在 event.target 是当前元素自身时触发处理函数

    .once点击事件将只会触发一次

    .passive滚动事件的默认行为 (即滚动行为) 将会立即触发

2.注册组件

  • 全局组件:在所有的Vue实例中都可以用

  • 局部组件：仅可以在当前的挂载点中使用

  • Vue.component(组件标签，组件的模板内容)声明组件

  • template:用户自定义的组件模板的内容

3.模板组件的优化

  • 可以把自定义的模板内容单独拿出来放在<template></template>标签中

  • 必须给<template></template>标签设置id属性

  • template:自定义的id名称

4.使用属性向组件传参

  • 通过给组件标签设置自定义属性来传参

  • 在组件中使用props属性来接收通过组件标签的属性传递过来的参数

  • 在自定义模板中用{{}}来显示参数

5.通过data()向组件传参

  • 通过给组件设置data(){}来给自定义模板传参

  • data(){}中用return{}来返回参数

  • 在自定义模板中用{{}}来显示参数

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

  • data(){}和属性可以共同向组件传参

7.父组件向子组件传参，子组件接受并验证

  • 父组件是唯一的

  • 全局组件的父组件就是挂载点

  • 子组件：可以有多个，可以由全局组件或局部组件充当

  • 用自定义属性来实现父组件向子组件传参

  • 子组件通过props: {}来接受并设置验证属性

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

  • $emit触发父组件的自定义事件

  • mounted(){}是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作

上一条：魔术方法__isset()、__unset()、__sleep()、__wakeup()与__call()、__callStatic()的实例使用下一条：【开幕式邀请函H5】等了这么久，活动开幕式的宣传H5案例终于来了！
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多