vue3学习(三)

news/2024/7/14 5:46:50

前言

        继续接上一篇笔记,继续学习的vue的组件化知识,可能需要分2个小节记录。前端大佬请忽略,也可以留下大家的鼓励,感恩!


一、理解组件化

在这里插入图片描述
在这里插入图片描述

二、组件化知识

1、先上知识点:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、示例代码

App.vue (主页面)

<template><HelloWorld v-bind:msg="msg" @getChildMsg="getChildMsg" :user="user" @getSonInfo="getSonInfo"/><hr/><h1>我是App父组建</h1><label>主页面输入框:</label><input type="text" @keyup="changeMsg($event.target.value)"/><h1>子传父显示:{{ childMsg }}</h1><h1>子传对象到父</h1><ul><li>son name:{{ sonData.name }}</li><li>son age:{{ sonData.age }}</li><li>son school:{{ sonData.school }}</li></ul></template><script setup>
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'// ref创建响应式数据
const msg = ref('Welcome to Your Vue.js App')function changeMsg(value) {console.log("输入msg:", value);msg.value = value
}//父传子,对象
const user = {name:"tom",age:18,school:"MIT"
}//定义子传父属性
const childMsg = ref('子传值父');
//定义方法
const getChildMsg = (ms) =>{console.log('getChildMsg',ms);childMsg.value = ms;
}const sonData = {name: '',age: null,school: ''
}
const getSonInfo = (sonInfo) =>{console.log("App son:",sonInfo)sonData.name = sonInfo.name;sonData.age = sonInfo.age;sonData.school = sonInfo.school;
}</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

HelloWorld.vue(全局组件)

<template><div class="hello"><h1>我是HelloWorld子组建</h1><h1>主页面输入传值:{{ msg }}</h1><h1>主页面传对象到子</h1><ul><li>name:{{ user.name }}</li><li>age:{{ user.age }}</li><li>school:{{ user.school }}</li></ul><h1>组建内输入:{{ compMsg }}</h1>
<!--    <input type="text" readonly v-model="compMsg">--><label>组建内输入框:</label><input type="text" @keyup="keyUpChange($event.target.value)"></div>
</template>
<!--
普通写法
<script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script>--><!-- script setup写法 -->
<script setup>
import {defineProps, ref, defineEmits} from 'vue';//组建传参数,defineProps:父传子,defineEmits子传父
const props = defineProps({msg: String,user: {type: Object}
});
console.log(props);let childMsg = ref("子传父msg");
console.log(childMsg);//思考一下,为什么组建内输入框的值不会立马渲染到页面上?答案:其实是ref定义,下面又没有用.value = 接收
//let compMsg = ref('组建内输入msg');
const compMsg = ref('组建内输入msg');function keyUpChange(value) {console.log("组建内容输入msg:", value);compMsg.value = value;changeChildMsg();//触发发送对象到父sendChildUser();
}//定义发送给父组建的方法
const emits = defineEmits(['getChildMsg','getSonInfo']);//定义方法
function changeChildMsg() {emits('getChildMsg', compMsg.value);
}/* 这种是变量声明方式定义函数,涉及到vue的生命周期
const changeChildMsg = () =>{emits('getChildMsg',compMsg);
}
*///子传对象到父
const childUser = {name:'son',age:3,school: '幼儿园'
}
function sendChildUser(){console.log("son:",childUser)emits('getSonInfo',childUser);
}</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}ul {list-style-type: none;padding: 0;
}li {display: inline-block;margin: 0 10px;
}a {color: #42b983;
}
</style>

3、效果

初始
在这里插入图片描述
输入内容效果
在这里插入图片描述
        知识点都是vuejs暴露的写法,这里code的是组合是API写法,大家用力理解下。


总结

  • 官网内容更详细,还是很有必要看的
  • 这里记录的笔记深度还不够,先入门吧,后面主要是会看官方文档
            就记录到这里,跟大家一起进步,uping!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.cpky.cn/p/12157.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

Hudi 多表摄取工具 HoodieMultiTableStreamer 配置方法与示例

博主历时三年精心创作的《大数据平台架构与原型实现:数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行,点击《重磅推荐:建大数据平台太难了!给我发个工程原型吧!》了解图书详情,京东购书链接:https://item.jd.com/12677623.html,扫描左侧二维…

服务器感染了. rmallox勒索病毒,如何确保数据文件完整恢复?

导言&#xff1a; 近年来&#xff0c;随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显。其中&#xff0c;勒索病毒作为一种严重的网络威胁&#xff0c;对个人和企业数据造成了巨大的威胁。本文将重点介绍.rmallox勒索病毒的特点、传播途径以及应对策略&#xff0c;旨…

java版本知识服务系统-高效知识付费Saaas平台的架构与功能模块设计

知识付费平台&#xff0c;作为我国近年来崭露头角的新型在线教育模式&#xff0c;正迅速改变着传统的学习方式。这种模式紧贴用户需求&#xff0c;将高质量的内容作为核心&#xff0c;借助互联网技术的力量&#xff0c;为用户打造了一个轻松便捷的学习环境。这些平台如同知识的…

Django 入门教程

1. Django简介 基本介绍 Django 是一个由 Python 编写的一个开放源代码的 Web 应用框架。 MVC 与 MVT 模型 MVC 模型 MVC 模式&#xff08;Model–view–controller&#xff09;是软件工程中的一种软件架构模式&#xff0c;把软件系统分为三个基本部分&#xff1a;模型&am…

基于Python实现 HR 分析(逻辑回归和基于树的机器学习)【500010104】

介绍 数据集说明 此数据集包含与员工有关的综合属性集合&#xff0c;从人口统计细节到与工作相关的因素。该分析的主要目的是预测员工流动率并辨别导致员工流失的潜在因素。 在这个数据集中&#xff0c;有14,999行&#xff0c;10列&#xff0c;以及这些变量&#xff1a;满意度…

基于51单片机的交通灯设计

一.硬件方案 本设计能模拟基本的交通控制系统&#xff0c;用红绿黄灯表示禁行&#xff0c;通行和等待的信号发生&#xff0c;还能进行倒计时显示。按键可以控制禁行、深夜模式、复位、东西通行、南北通行、时间加、时间减、切换等功能。共四个二位阴极数码管&#xff0c;东南西…