Vue3.0实现todolist之父子组件之间传值

王小婷

发布于 2022-09-30 08:21:40

7510

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-09-28，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度