vue组件传值

最新推荐文章于 2024-05-07 10:03:21 发布

羽行

最新推荐文章于 2024-05-07 10:03:21 发布

阅读量175

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/YuHang6686/article/details/127978784

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、父传子

使用方式：
	<Son :arr="arr">123</Son>
	在子组件的标签内写上传入的方法，子组件使用props接收
----------------------------------------父组件
<template>
  <div class="about">
    <h1>father组件</h1>
    <Son :arr="arr">123</Son>
  </div>
</template>

<script>
import Son from "./HomeView.vue";
export default {
  data() {
    return {
      arr: "父传子的参数num=1",
    };
  },
  components: { Son },
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="less"></style>
-----------------------------------子组件
<template>
  <div>
    <h3>son组件</h3>
    <div>父组件传入的值：{{ arr }}</div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    arr: {
      type: String,
      default: "zzzzz",
    },
  },
  components: {},
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="less"></style>
	//需要了解的点是：
	//<Son :arr="arr">123</Son>

需要注意的点：
请添加图片描述
2、子传父 $emit

使用方式：
	在子组件内定义一个方法，使用 
		this.$emit("TriggerEvent", this.num);
		this.$emit('父组件接受的事件名称'，'传给父组件的值')
		使用任何方式触发这个方法都可以将参数传递，不单只是点击事件
	父组件需要定义一个方法来接受形参
		<Son :arr="arr" @TriggerEvent="accept">{{ num }}</Son>
		<Son :arr="arr"  @子组件传入的事件 = '定义接受形参的事件'>{{ num }}</Son>
-----------------------------------子组件---------------------------------------------
<template>
  <div>
    <h3>son组件</h3>
    <slot></slot>
    <br />
    <button @click="trigger">点击传参</button>
    <button @click="() => (this.num = '再见!狂野之心。')">改变num参数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "子组件传入的参数1",
    };
  },
  components: {},
  mounted() {},
  methods: {
    trigger() {
      this.$emit("TriggerEvent", this.num);
    },
  },
};
</script>
<style scoped lang="less"></style>
-----------------------------------父组件---------------------------------------------
<template>
  <div class="about">
    <h1>father组件</h1>
    <Son :arr="arr" @TriggerEvent="accept">{{ num }}</Son>
  </div>
</template>

<script>
import Son from "./HomeView.vue";
export default {
  data() {
    return {
      arr: "父传子的参数num=1",
      num: "父组件定义的参数",
    };
  },
  components: { Son },
  mounted() {},
  methods: {
    accept(val) {
      console.log(val);
      this.num = val;
    },
  },
};
</script>
<style scoped lang="less"></style>

3、refs，父组件直接使用子组件/标签整个实例

使用方法：
	1、在标签内使用ref，可以直接操作DOM
	<h1 ref='h1'>father组件</h1>
	this.$refs.h1.innerHTML //可以获取到元素内容
	2、在组件内使用可以获取到组件的变量和方法
	<Son ref="childForRef"></Son>
	this.$refs.childForRef.str /num //可以获取到组件的变量
	this.$refs.childForRef.hello(); //可以使用组件的方法
	
<template>
  <div class="about">
    <h1>father组件</h1>
    <Son ref="childForRef"></Son>
    <div>
      子组件的参数<br />{{ this.childForRef.str }}<br />{{
        this.childForRef.num
      }}
    </div>
  </div>
</template>
<script>
import Son from "./HomeView.vue";
export default {
  data() {
    return {
      childForRef: "",
    };
  },
  components: { Son },
  mounted() {
    this.childForRef = this.$refs.childForRef;
    this.childForRef.hello();
  },
  methods: {
    accept(val) {
      console.log(val);
      this.num = val;
    },
  },
};
</script>
<style scoped lang="less"></style>

4、$parent获取父组件的所有实例

 使用方法：
	2、在组件内使用可以获取到组件的变量和方法
	<Son ref="childForRef"></Son>
	this.$parent.父组件的变量 
	this.$parent.父组件的方法;

5、祖传孙 v-bind="$attrs" v-on="$listeners"

使用方法：
	1、祖父组件正常传值
	<Children :name="name" :arr="arr"></Children>
	2、父组件的孙子组件写上 v-bind="$attrs" v-on="$listeners"
	<Son v-bind="$attrs" v-on="$listeners"></Son>
	3、子组件使用props接受参数
-----------------------祖父组件-------------------------
<template>
  <div>
    <h3>祖父组件</h3>
    <Children :name="name" :arr="arr"></Children>
  </div>
</template>

<script>
import Children from "./HomeView.vue";
export default {
  data() {
    return {
      name: "岁月和你的面影",
      arr: [
        {
          name: "最佳歌手",
          age: 2018,
        },
        {
          name: "全球变暖",
          age: 2012,
        },
      ],
    };
  },
  components: { Children },
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="less"></style>
-----------------------父组件-------------------------
<template>
  <div>
    <h3>父组件</h3>
    <Son v-bind="$attrs" v-on="$listeners"></Son>
  </div>
</template>

<script>
import Son from "@/components/HelloWorld.vue";
export default {
  data() {
    return {};
  },
  components: { Son },
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="less"></style>
-----------------------孙子组件-------------------------
<template>
  <div>
    <h3>孙子组件</h3>
    <div>{{ name }}</div>
    <div v-for="item in arr" :key="item">{{ item.name }}||{{ item.age }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    name: {
      type: String,
    },
    arr: {
      type: Array,
    },
  },
  components: {},
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="less"></style>

6、孙传祖（隔一个组件）

使用方法：
	1、子组件定义事件触发 定义emit传递参数
	2、父组件使用`v-on="$listeners"`
	3、祖父组件使用事件接受形参
------------------子组件----------------------
<template>
  <div>
    <h3>孙子组件</h3>
    <button @click="trigger">传入参数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "岁月和你的面影",
      arr: [
        {
          name: "最佳歌手",
          age: 2018,
        },
        {
          name: "全球变暖",
          age: 2012,
        },
      ],
    };
  },
  components: {},
  mounted() {},
  methods: {
    trigger() {
      this.$emit("butTrigger", this.arr);
    },
  },
};
</script>
<style scoped lang="less"></style>
------------------父组件----------------------
<template>
  <div>
    <h3>父组件</h3>
    <Son v-on="$listeners"></Son>
  </div>
</template>

<script>
import Son from "@/components/HelloWorld.vue";
export default {
  data() {
    return {};
  },
  components: { Son },
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="less"></style>
------------------祖父组件----------------------
<template>
  <div>
    <h3>祖父组件</h3>
    <Children @butTrigger="eventOne"></Children>
    <div v-for="item in num" :key="item">{{ item.name }}||{{ item.age }}</div>
  </div>
</template>

<script>
import Children from "./HomeView.vue";
export default {
  data() {
    return {
      num: [
        {
          name: "烟火里的尘埃",
          age: 2014,
        },
        {
          name: "大火",
          age: "??",
        },
      ],
    };
  },
  components: { Children },
  mounted() {},
  methods: {
    eventOne(value) {
      this.num = value;
    },
  },
};
</script>
<style scoped lang="less"></style>