1:首先在views底下新建一个detail组件
<template> <div> <h1>我是detail组件</h1> <child></child> </div> </template> <script> import { defineComponent,ref } from "vue"; import child from '../components/child/Child.vue' export default defineComponent({ name: "Detail", components:{ child }, setup() { }, }); </script>
在components创建child组件
<template> <div> <h1>我是child组件</h1> </div> </template> <script> import { defineComponent, ref } from "vue"; export default defineComponent({ name: "Child", setup() {}, }); </script>
在router/index.js里面添加新建组件的路径
{ path: "/detail", name: "Detail", component: () => import("../views/Detail.vue"), },
在浏览器打开
可以看见
detail成功引进child组件运行结果
1：父组件传递给子组件数据
首先定义父组件Detail 里面的一些数据
setup() { let msg=ref('这是父组件') return{ msg } },
在child子组件的标签上通过动态绑定属性的方式 ：属性名
属性名=一个属性的值 通常是一样的
<h1>我是detail组件</h1> <child :msg='msg'></child>
Detail.vue
<template> <div> <h1>我是detail组件</h1> <child :msg='msg'></child> </div> </template> <script> import { defineComponent,ref } from "vue"; import child from '../components/child/Child.vue' export default defineComponent({ name: "Detail", components:{ child }, setup() { let msg=ref('这是父组件') return{ msg } }, }); </script>
这样数据就传递给子组件了
在子组件里面改怎么接收？
子组件接收数据
使用属性：props 专门用来接收父组件传递过来的参数的，对传递过来的数据进行校验，必须是string类型的
export default defineComponent({ name: "Child", //接收父组件传递过来的参数 //props接收的数据也不能直接改 props: { msg: { //数据类型校验 type: String, }, }, setup(props) { console.log(props.msg); }, });
props接收的数据直接可以用
<div> <h1>我是child组件</h1> 父组件传递过来的数据:{{ msg }} </div>
Child.vue
<template> <div> <h1>我是child组件</h1> 父组件传递过来的数据:{{ msg }} </div> </template> <script> import { defineComponent, ref } from "vue"; export default defineComponent({ name: "Child", //接收父组件传递过来的参数 //props接收的数据也不能直接改 props: { msg: { //数据类型校验 type: String, }, }, setup(props) { console.log(props.msg); }, }); </script>
查看结果
2：子组件传递参数给父组件
子组件通过分开事件的方式，通过ctx.emit分发事件
Child.vue
<template> <div> <h1>我是child组件</h1> 父组件传递过来的数据:{{ msg }} <button @click="send">传值给服组件</button> </div> </template> <script> import { defineComponent, ref } from "vue"; export default defineComponent({ name: "Child", //接收父组件传递过来的参数 //props接收的数据也不能直接改 props: { msg: { //数据类型校验 type: String, }, }, setup(props) { console.log(props.msg); let childMsg = ref("我是子组件的数据内容"); let send = () => { //子组件通过分开事件的方式，通过ctx.emit分发事件 //emit第一个参数是事件名称，第二个参数是传递的数据 //相当于点击按钮，就通过ctx.emit分发了一个叫send的事件，并且把childMsg这个数据传递给父组件了 ctx.emit("send", childMsg.value); }; return{ childMsg, send } }, }); </script>
父组件接收子组件的数据
父组件中绑定自定义事件(在子组件中分发的事件名称send)
第一个send是子组件分发过来的，第二个send是父组件自己的
<template> <div> <h1>我是detail组件</h1> <child :msg='msg' @send='send'></child> </div> </template> <script> import { defineComponent,ref } from "vue"; import child from '../components/child/Child.vue' export default defineComponent({ name: "Detail", components:{ child }, setup() { let msg=ref('这是父组件的一些数据') let send=(val)=>{ console.log(val) } return{ msg, send } }, }); </script>
在这里分发事件不一定是要通过点击事件，也可以通过onMounted页面加载时候通过分发事件的方式
如果传递的数据是多个
可以通过数组的方式
let childMsg = ref("我是子组件的数据内容"); let childNmu=ref(10)
onMounted(()=>{ // ctx.emit("send", childMsg.value); ctx.emit("send", [childMsg.value,childNmu.value]); })
通过数组的方式 的运行结果
还可以通过对象的方式
onMounted(() => { // ctx.emit("send", childMsg.value); //通过数组方式传值 //ctx.emit("send", [childMsg.value,childNmu.value]); // 通过对象的方式传值 ctx.emit("send", { msg: childMsg.value, num: childNmu.value, }); });
运行结果
Child.vue
<template> <div> <h1>我是child组件</h1> 父组件传递过来的数据:{{ msg }} <button @click="send">点击传值给父组件</button> </div> </template> <script> import { defineComponent, onMounted, ref } from "vue"; export default defineComponent({ name: "Child", //接收父组件传递过来的参数 //props接收的数据也不能直接改 props: { msg: { //数据类型校验 type: String, }, }, setup(props, ctx) { console.log(props.msg); let childMsg = ref("我是子组件的数据内容"); let childNmu = ref(10); // let send = () => { // //子组件通过分开事件的方式，通过ctx.emit分发事件 // //emit第一个参数是事件名称，第二个参数是传递的数据 // //相当于点击按钮，就通过ctx.emit分发了一个叫send的事件，并且把childMsg这个数据传递给父组件了 // ctx.emit("send", childMsg.value); // }; onMounted(() => { // ctx.emit("send", childMsg.value); //通过数组方式传值 //ctx.emit("send", [childMsg.value,childNmu.value]); // 通过对象的方式传值 ctx.emit("send", { msg: childMsg.value, num: childNmu.value, }); }); return { childMsg, //send }; }, }); </script>
