陕西城乡建设部网站,张家港设计公司,河间网站,企业为什么需要管理特性四#xff1a;父传子组件传参【defineProps】#xff1a;
父组件#xff08;传递数据#xff09;#xff1a;利用自定义属性传递数据。
templateh3我是父组件/h3hr /Child :nameinfo.name :ageinfo.age父传子组件传参【defineProps】
父组件传递数据利用自定义属性传递数据。
templateh3我是父组件/h3hr /Child :nameinfo.name :ageinfo.age/Child
/templatescript setup
// 引入组件
import Child from ../components/Child;
// 引入 reactive 函数
import { reactive } from vue;
// 创建 reactive 数据
let info reactive({ name: 张三, age: 18 });
/script
子组件接收数据使用 defineProps 接收数据。
templateh3我是子組件/h3p{{ name }} : {{ age }}/p
/templatescript setup
// 接收父组件传递的数据
const props defineProps([name, age]);
/script
注defineProps 用于接收父组件传递的数据不需要引入可以直接使用。
特性五子传父组件传参【defineEmits】
父组件接收数据创建自定义事件利用方法接收数据。
templateh3我是父组件/h3hr /Child myEventadd/Child
/templatescript setup
// 引入组件
import Child from ../components/Child;
// 创建方法
const add (value) {console.log(我是父组件, value);
}
/script
子组件传递数据使用 defineEmits 注册自定义事件传递数据。
templateh3我是子组件/h3button clickisShow传递数据/button
/templatescript setup
// 注册父组件传递的自定义事件
const emit defineEmits([myEvent]);
// 创建方法调用自定义事件
const isShow () {emit(myEvent, 666);
}
/script
注defineEmits 用于注册自定义事件不需要引入可以直接使用。 特性六使用动态组件【component】
templateh3我是父组件/h3button clickisShow !isShow切换组件/buttonhr /!-- 如果 isShow 为 true 就显示 A 组件否则显示 B 组件 --component :isisShow ? A : B/component
/templatescript setup
// 引入组件
import A from ../components/A;
import B from ../components/B;
// 引入 ref 函数
import { ref } from vue;
// 创建 ref 数据
const isShow ref(true);
/script 特性七使用 v-bind 绑定 CSS 样式
templateh3 classtitle我是父组件/h3button clickstate blue按钮/button
/templatescript setup
// 引入 ref 函数
import { ref } from vue;
// 创建 ref 数据
let state ref(red);
/scriptstyle scoped
.title {/* 使用 v-bind 绑定 CSS 样式 */color: v-bind(state);
}
/style 原创作者吴小糖
创作时间2023.10.19
