3.0 vue3有关组件传值

2021-12-26 21:31:58 阅读：173 来源： 互联网

标签：school context vue3 reactive 3.0 props 组件 emit 传值

vue3数据变量的修改https://blog.csdn.net/qq_42543244/article/details/122146552在使用过框架的过程中，有关组件传值是必不缺少的一部分，今天主要记录一下有关vue3组件传值的用法！

父组件：

我的父组件定义如下

<template>
  <h1 v-show="data.title">标题：我是子组件传递过来的===>{{ data.title }}</h1>
  <demo
    msg="你好啊"
    school="洛阳理工"
    :fraction="100"
    @child-click="childClick"
  >
    <h2>默认插槽</h2>
    <template v-slot:button>
      <button>具名插槽点击</button>
    </template>
  </demo>
</template>

<script>
import { reactive } from "vue";
import Demo from "@/components/Demo.vue";
export default {
  name: "App",
  components: {
    Demo,
  },
  setup() {
    let data = reactive({
      title: "",
    });

    // 接收子组件发送出来的事件
    function childClick(e) {
      data.title = e;
    }

    return {
      data,
      childClick,
    };
  },
};
</script>

子组件：Demo.vue

<template>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>学校：{{ school }} {{ person.school }}</h2>
  <h2>信息：{{ msg }}</h2>
  <h2>分数：{{ fraction }}</h2>
  <div>
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- 具名插槽 -->
    <slot name="button"></slot>
  </div>

  <button @click="test">子组件点击</button>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "Demo",
  /* 
   setup的执行顺序是要早于 beforeCreate周期的 ，执行一次，在setup中输出this是undefined

   setup接收两个参数：
    props：值为对象，包含：组件外部传递过来的，且在组件内部声明接收的属性
    context：上下文对象
            attrs:值为对象，包含组件外部传递过来的，但是未在props声明的属性，相当于vue2中的this.$attrs
            slots:收到的插槽的内容，相当于vue2中的this.$slots
            emit:分发自定义事件的函数，相当于vue2中的this.$emit

*/
  // props此处与vue2写法一致即可
  props: {
    msg: {
      type: String,
      default: "",
    },
    fraction: {
      type: Number,
      default: 0,
    },
    school: {
      type: String,
      default: "",
    },
  },
  //emits 需要去定义子组件中抛出去的事件，不写也可正常运行，但是控制台会出现警告，请特别注意一下
  emits: ["child-click"],
  setup(props, context) {
    //常用写法可用解构方式 (props, {attrs,emit})

    /* 在此处就可以取到props,我们可以直接使用props来进行业务逻辑，应用场景
    （比如父组件传给子组件一个id，我们可以在这里取到id值进行数据的请求） */
    console.log("props===>", props);
    console.log("attrs===>", context.attrs);
    console.log("slots===>", context.slots);
    console.log("emit===>", context.emit);
    let person = reactive({
      name: "小明",
      age: 18,
      school: props.school, //我们也可以把props的内容给我们使用reactive，或者ref声明的变量
    });

    function test() {
      context.emit("child-click", "123456"); //向父组件抛出事件

      // emit("child-click", "123456"); //如果上放context采用的解构的方式，直接emit发送事件即可
    }

    return {
      person,
      test,
    };
  },
};
</script>

标签：school,context,vue3,reactive,3.0,props,组件,emit,传值
来源： https://blog.csdn.net/qq_42543244/article/details/122161060

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

3.0 vue3有关组件传值