数控新代系统启用永久密码

说明:此处的例子并不一定是最佳使用方式,仅为了验证数据的传输

父组件

<template>
  <p>++++++++++++++++++<b>调用子组件</b>+++++++++++++++++++++</p>
  <p>子组件调用父组件方法测试,子组件提交即可生成随机数 {{ random }}</p>
  <p>在调用的子组件定义ref</p>
  <hello-world :random="random" ref="greeting" @getRandom="getRandom" />
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";
import { ref, computed, onMounted, provide, getCurrentInstance } from "vue";
export default {
  components: { HelloWorld },
  setup(props, ctx) {
    // **父组件获取子组件的数据**
    // const的值为上面子组件定义的ref
    const greeting = ref(null);

    onMounted(() => {
      // **父组件获取子组件的值**
      console.log(greeting.value.greeting);
      greeting.value.submitGreeting();
      // ++++++++end+++++++++++++++++
    });

    // **子组件获取父组件的值和方法
    // 父组件先定义函数 ==>生成随机数
    let random = ref(1);
    const getRandom = () => {
      random.value = Math.floor(Math.random() * 100);
    };

    return {
      random,
      greeting,
      getRandom,
    };
  },
};
</script>

子组件

// 主要验证vuex的使用, 和父子兄弟组件之间的交互
<template>
  <input
    type="text"
    name="greetings"
    v-model="greeting"
    style="margin-right: 20px"
  />
  <button @click="submitGreeting">提交Greeting</button>
</template>

<script>
import { ref } from "vue";
import { useStore } from "vuex";
export default {
  name: "HelloWorld",
  // **子组件获取父组件的值**
  props: {
    random: {
      type: Number,
    },
  },
  // **子组件获取父组件传入的方法**
  emits: ["getRandom"],
  setup(props, ctx) {
    const store = useStore();
    const greeting = ref("Hello");
    // 将值存入store
    const submitGreeting = () => {
      store.commit("submitGreeting", greeting.value);
      store.commit("increment");
      console.log("点击提交Greetings按钮,修改次数+1");
      // ++++++++++验证子组件调用父组件的方法++++++++
      // 通过emits传入的方法
      ctx.emit("getRandom");
      // ++++++++++++++++++end+++++++++++++++++++
    };

    // +++++++++++++验证父组件调用子组件的方法+++++++++++++
    // 将组件中的值暴露出去, 否则父组件中无法使用
    ctx.expose({ greeting, submitGreeting });
    // ++++++++++++++++++end+++++++++++++++++++

    return {
      greeting,
      submitGreeting,
    };
  },
};
</script>

跨组件的调用(provide和)

第一层组件

<template>
</template>

<script>
import { ref, computed, onMounted, provide, getCurrentInstance } from "vue";
export default {
  setup(props, ctx) {
    // 生成随机数
    let random = ref(1);
    const getRandom = () => {
      random.value = Math.floor(Math.random() * 100);
    };
    // provide 和 reject 的使用
    provide("user", random);

    return {
      random,
    };
  },
};
</script>

跨组件

// 主要验证provide 和reject 的使用
<template>
  <div>我只是想试下provide 和 reject 怎么用 {{ user }}</div>
</template>
<script>
import { inject } from "vue";

export default {
  name: "Next",
  setup() {
    // provide传过来的值
    const user = inject("user");
    return {
      user,
    };
  },
};
</script>
本文链接:https://www.dzdvip.com/34645.html 版权声明:本文内容均来源于互联网。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 395045033@qq.com,一经查实,本站将立刻删除。
(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年7月12日 22:38
下一篇 2022年7月13日 12:31

相关推荐

发表评论

您的电子邮箱地址不会被公开。