vue3 随手笔记8--组件通信方式9/1--props

一、什么是 props？

props（属性） 是父组件向子组件传递数据的方式。它允许你将数据从父组件“流入”到子组件中，子组件可以使用这些数据进行渲染或处理逻辑。

只能父组件传递给子组件

props 是最基础、最常见的通信方式之一。

二、如何定义和使用 props

创建一个测试的vue3demo

vscode环境下  选择一个空的文件夹作为工作区

选择终端  新建终端

第一步 创建项目

npm creat vue@latest  xxx  

xxx为自定义名称

Vue项目命名的一些基本指导原则：

1. 使用小写字母

• 推荐使用全小写来命名你的项目，这有助于避免由于大小写敏感性导致的问题，尤其是在不同的操作系统之间（例如从Windows迁移到Linux）。

2. 使用连字符(-)分隔单词

• 如果你想让你的项目名更具描述性且包含多个单词，推荐使用连字符-来连接这些单词。例如：my-vue-project。

3. 避免使用特殊字符

• 应该避免在项目名称中使用任何非字母数字字符（除了连字符），包括空格、下划线等，以防止潜在的兼容性问题。

4. 不要以数字开头

• 项目名称不应以数字开头，因为这可能会导致某些脚本语言或系统命令解析错误。

5. 保持简洁明了

• 尽量让项目名称简洁且具有描述性，这样可以让人一眼看出项目的用途或主要内容。

6. 检查关键字冲突

• 确保项目名称不会与现有的Vue插件或其他依赖库的关键字冲突，以免造成混淆或技术上的问题。

7. 考虑未来的可扩展性

• 虽然你可能现在正在构建一个小项目，但考虑到未来它可能会成长，因此选择一个不过于具体且有足够灵活性的名字会是个不错的选择。

第二步 cd 到目录

cd xxx

第三步 初始化

npm install

第四步 初次运行

npm run dev

第五步 安装依赖

目前只用到路由 所以只安装了路由

npm install --save vue-router

第六步 创建路由

在src文件夹下面 创建 router文件夹

router文件夹下 创建文件 index.js

import {createRouter , createWebHistory} from 'vue-router'
const routes = [
  
]

const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

在main.js  引入路由

import { createApp } from 'vue'
import App from './App.vue'
//引入路由
import router from './router'

var app =   createApp(App)
//使用路由
app.use(router)
app.mount('#app')

第七步 创建views

在src文件夹下面 创建 views文件夹

在views文件夹 创建index.vue

<template>

</template>

<script setup>

</script>

在views文件夹 创建props文件夹

props文件夹  创建Parent.vue

第八步 添加路由

router文件夹下index.js

import {createRouter , createWebHistory} from 'vue-router'
const routes = [
   {
    path: '/',
    name: 'index',
    component: () => import('@/views/index.vue')
   },
    {
        path: '/props',
        name: 'props',
        component: () => import('@/views/props/Parent.vue')
    },
   
]

const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

在src文件夹下的 APP.vue

<script setup>

</script>

<template>
<div class="com">
    <h1>
      各种Vue组件间通信/传值
    
    </h1>

    <div>
      <h2 style="display: inline">演示:</h2>&nbsp;&nbsp;
      <router-link to="/">index</router-link>&nbsp;&nbsp;
      <router-link to="/props">props</router-link>&nbsp;&nbsp;
     
    </div>
    <br>
    <router-view></router-view>
  </div>
</template>


<style  scoped>
  .com {
    margin: 10px;
    
  }
  
</style>
<style>
  .box {
    border: solid 1px #aaa;
    margin: 5px;
    padding: 5px;
  }
</style>

• <router-view>：是一个占位符组件，用于渲染与当前路径匹配的组件。换句话说，当用户导航到特定的 URL 时，<router-view> 将被相应路径配置中的组件替换并展示出来。
• <router-link> 是导航 类似于 HTML 中的 <a> 标签，但不会引起页面刷新，而是通过 Vue Router 实现单页应用（SPA）内的“无刷新跳转”。

开始编写使用props 进行组件通信 

在Parent.vue 文件中 添加内容

<template>
    <div class="props-text">
        <h1>props</h1>
        <h3>我是父组件</h3>
       
    </div>
</template>
<script setup>

import { ref } from 'vue'


</script>

<style scoped>
.props-text {
width: 400px;
height: 400px;
background-color: burlywood;
}
</style>

在props文件夹下 新建文件  Child.vue

<template>
    <div class="son">
        <h1>我是子组件</h1>
      
    </div>
</template>
<script setup>

</script>



<style scoped>
.son {
width: 100px;
height: 100px;
background-color: red;
}
</style>

创建好父子组件

在父组件中 引用子组件

<template>
    <div class="props-text">
        <h1>props</h1>
        <h3>我是父组件</h3>
        <Child></Child>
    </div>
</template>
<script setup>
import Child from './Child.vue'
</script>

<style scoped>
.props-text {
width: 400px;
height: 400px;
background-color: burlywood;
}
</style>

defineProps 是 Vue 3 中 Composition API 的一部分，特别是在使用 <script setup> 语法时非常有用。它用于声明和获取父组件传递给子组件的 props（属性）。通过 defineProps，你可以方便地在 <script setup> 块中定义 props 并直接使用它们，而不需要像 Options API 那样需要一个明确的对象来定义。

如果想直接父组件传递给 子组件时 

父组件代码

<template>
    <div class="props-text">
        <h1>props</h1>
        <h3>我是父组件</h3>
        <Child info="父组件的info"></Child>
    </div>
</template>
<script setup>
import Child from './Child.vue'


</script>

<style scoped>
.props-text {
width: 400px;
height: 400px;
background-color: burlywood;
}
</style>

子组件代码

<template>
    <div class="son">
        <h1>我是子组件</h1>
        <p>{{info}}</p>
        <!-- 或者-->
         <p>{{props.info}}</p>
    </div>
</template>
<script setup>
const props = defineProps(["info"])

</script>



<style scoped>
.son {
width: 100px;
height: 100px;
background-color: red;
}
</style>

如果想动态绑定一个值 给子组件时

父组件代码

<template>
    <div class="props-text">
        <h1>props</h1>
        <h3>我是父组件</h3>
        <Child :msg="msg" info="父组件的info"></Child>
    </div>
</template>
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'
const msg = ref('我是父组件的msg')

</script>

<style scoped>
.props-text {
width: 400px;
height: 400px;
background-color: burlywood;
}
</style>

子组件代码

<template>
    <div class="son">
        <h1>我是子组件</h1>
        <p>{{msg}}</p>
        <p>{{info}}</p>
        <!-- 或者-->
         <p>{{props.msg}}</p>
         <p>{{props.info}}</p>
    </div>
</template>
<script setup>
const props = defineProps(["msg","info"])

</script>



<style scoped>
.son {
width: 100px;
height: 100px;
background-color: red;
}
</style>

三 注意事项

Vue 不允许直接修改 props（会触发警告）