第三十节——组合式API组件传值

一、父传子

子组件

复制代码
<template>
  <div>
   <v3></v3>
  </div>
</template>
<script setup>
// 直接引入对应的组件 无需注册可以直接使用
import v3 from "./v3.vue";
import { defineProps } from 'vue'

/**
 * 定义接收父组件传过来的参数
 * 对象里面的选项和props一直
 */
defineProps(['name'])

</script>

父组件

复制代码
<template>
  <div>
   <v3 name="李四"></v3>
  </div>
</template>
<script setup>
// 直接引入对应的组件 无需注册可以直接使用
import v3 from "./v3.vue";
</script>

子组件

复制代码
<template>
  <div>哈哈哈{{ name }}</div>
</template>
<script setup>
import { defineProps } from "vue";

/**
 * 定义接收父组件传过来的参数
 * 对象里面的选项和props一直
 */
defineProps(["name"]);
</script>

二、子传父

父组件

复制代码
<template>
  <div>
  <!-- 传入的方法 -->
   <v3  @get="get" name="李四"></v3>
  </div>
</template>
<script setup>
// 直接引入对应的组件 无需注册可以直接使用
import v3 from "./v3.vue";

const get = (val) => {
  console.log(val)
}
</script>

子组件

复制代码
<template>
  <div>哈哈哈{{ name }}</div>
  <button @click="toParentData">往父组件传值</button>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";

/**
 * 定义接收父组件传过来的参数
 * 对象里面的选项和props一直
 */
defineProps(["name"]);

// 定义一个变量来接收父组件传来的方法
const emit = defineEmits(["get"]);

// 定义一个事件
const toParentData = () => {
  // 使用emit往父组件传
  emit("get",'我是这里传过去的')
}
</script>

三、祖孙传值

上级组件

复制代码
<template>
  <div>
    <Child1 @handle2="handle" name="来自爷爷的问候"></Child1>
  </div>
</template>
<script setup>
  import Child1 from "./child1.vue";
  import { provide } from "vue";
  /**
 * 统一下发
 */
  provide("info", { name: "张三", age: 18 });
</script>

孙级组件

复制代码
<template>
  <div>孙组件 ---{{ info.name }}</div>
</template>
<script setup>
import { inject } from 'vue'
// 拿到上层下发的值
const info = inject('info')

</script>

四、同级组件

推荐使用状态管理,这里简单介绍一下vuex的使用

1、定义store

复制代码
import { createStore } from 'vuex'

// 创建一个vuex并导出
export default createStore({
  state: {
    num: 1
  },
  
  mutations: {
    add (state) {
      state.num += 1
    }
  }
})

2、在页面中使用

复制代码
<template>
  <div>
    <!-- 在template里面使用和一前一样 -->
    我是vuex {{ $store.state.num }}
    <button @click="add">vuex +1</button>
  </div>
</template>
<script setup>
// 引入store
import { useStore } from 'vuex'

// 老规矩,拿钩子创建一个store
const store = useStore()

const add = () => {
  // 调用方式和vue2几乎一样,只要注意使用useStore() 返回的调用就行
  store.commit("add")
}

</script>

五、自定义组件使用v-model

封装input组件实现并实现双向绑定

1、父级组件

复制代码
<template>
  <div>
    <!-- 
      在自定义组件上使用v-model
      需要在后面加上:参数名,这个参数名会被子组件接收
     -->
    <qf-input v-model:value="name"></qf-input>
    {{ name }}
  </div>
</template>

<script setup>
import { ref } from "vue";

const name = ref("张三");
</script>

2、子组件

复制代码
<template>
  <div>
    <input :value="value" @input="inputChange" type="text" placeholder="一个普通的输入框" />
  </div>
</template>

<script setup>
/**
 * 这个value属性是 v-model传入的
 * 这个value 必须 和 传入的参数名一致
 */
defineProps(["value"]);

/**
 * 必须使用update:加上双向绑定的参数名
 */
const emit = defineEmits(["update:value"]);

const inputChange = (event) => {
  /**
   * 参数每次改变的时候 emit 抛出一个事件
   * 会自动 修改传入的值
   */
  emit("update:value", event.taget.value);
};
</script>
相关推荐
玲小珑几秒前
LangChain.js 完全开发手册(六)Vector 向量化技术与语义搜索
前端·langchain·ai编程
小蒜学长26 分钟前
基于SpringBoot+Vue的健身房管理系统的设计与实现(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端
晓得迷路了32 分钟前
栗子前端技术周刊第 97 期 - Viteland:8 月回顾、Redux Toolkit 2.9、Nuxt 4.1...
前端·javascript·nuxt.js
前端双越老师35 分钟前
前端开发 AI Agent 智能体,需要掌握哪些知识?
前端·node.js·agent
EndingCoder36 分钟前
Electron 安全性最佳实践:防范常见漏洞
前端·javascript·electron·前端框架·node.js·桌面端
学前端搞口饭吃44 分钟前
React props的使用
前端·javascript·react.js
灵感__idea1 小时前
JavaScript高级程序设计(第5版):前端的能力边界
前端·javascript·程序员
华洛1 小时前
SEO还没死,GEO之战已经开始
前端·javascript·产品
IT_陈寒1 小时前
Python性能优化:5个被低估的魔法方法让你的代码提速50%
前端·人工智能·后端
As33100101 小时前
Chrome 插件开发入门指南:从基础到实践
前端·chrome