vue3学习（三）

news2024/12/22 19:52:02

前言

继续接上一篇笔记，继续学习的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>