vue的父子传参

简介: vue的父子传参

1.父传子:

vue的父组件传递给子组件只需要通过自定义属性传递到子组件,子组件通过props获取传递的参数。

//父组件
<template>
  <h3>父</h3>
  <child :title="arr1" />
</template>
<script setup>
import { ref } from "vue";
import child from "./b.vue";
const arr1 = ref([]);
</script>
<template>
    <h3>子</h3>
    <p >{{ props.title }}</p>
   </template>
   <script setup>
   import {ref,defineProps} from 'vue';
   const props = defineProps(['title']);
   </script>

2.子传父:

子传父是通过edit设置自定义事件,在父组件中绑定事件,子组件中重复。

//子组件
<template>
  子组件
  <button @click="cs">测试</button>
</template>
<script setup>
import { defineEmits } from "vue";
const emit = defineEmits(['Fclick']);
const cs = () => {
    emit('Fclick','子传父');
};
</script>
//父组件
<template>
  <h3>测试子传父</h3>
  <Child @fclick="trigger" />
  <p>{{ a }}</p>
</template>
<script setup >
import { ref } from "vue";
import Child from "./component.vue";
const a = ref("");
const trigger = (data) => {
  console.log(data);
  a.value = data
};
</script>
目录
相关文章
|
1天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
4 0
|
1天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
5 0
|
1天前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
|
1天前
|
JavaScript Java
vue的论坛管理模块-文章查看-01
vue的论坛管理模块-文章查看-01
|
1天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
1天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
|
1天前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中,`publicPath`设定为&quot;/h5/party/pc/&quot;,在线环境基于打包后的`dist`目录,而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`,包含两个相关配置图。
vue打包部署问题
|
1天前
|
JavaScript 前端开发
iconfont 图标在vue里的使用
iconfont 图标在vue里的使用
11 0
|
1天前
|
资源调度 JavaScript 前端开发
vue 项目运行过程中出现错误的问题解决
vue 项目运行过程中出现错误的问题解决
|
2天前
|
JavaScript 前端开发
VUE里父组件与子组件的交互操作
VUE里父组件与子组件的交互操作