讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > 博客列表 > Vue组件注册和参数传递
博主信息
博文 55
粉丝 3
评论 0
访问量 72840
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Vue组件注册和参数传递
王佳祥
原创
2484人浏览过

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节点进行相关操作

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：钩子, 其实就是一个事件方法, 并不神秘
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录