setaddress() { // 改值方法一

发布时间：2025-06-24 20:11:52  作者：北方职教升学中心  阅读量：148

---

1.vue2通过$parent实现组件传值-父传子。

setaddress() {      // 改值方法一；      //   this.$store.state.address = "北京";      //   改值方法2： 调用vuex的方法      this.$store.commit("setAddress", "上海");    },

因为父组件中可以有几个子组件，所以通过this.$children输出结果是一个数组。

我们可以通过$parent获得父组件的整个实例对象，然后可以直接调用this方法和数据，指定值不需要通过标签内部传输。

{ arr | guolvqi | guolvqi2 | guolvqi3 }}</p>

<template> <div class="about"> <p>{。

目录。dom元素或子组件可以通过设置ref属性来指定引用名称，然后在组件实例中通过$refs访问引用，操作dom元素。{ $store.state.address }}</p>

有两种方法可以修改vuex的值。󿀌然后需要调用子组件的方法来调用子组件的方法。}</p>console.log(this.$parent); console.log(this.$parent.a);

2.vue2 组件传值-子传父通过$children实现。

8.vuex的用法。

//// 传输非响应数据 provide: { b: 200, },

传递响应数据：

provide() { return { num: () => this.a, }; },

在子页注入操作 ，但注射后不能直接使用󿀌新属性࿰需要通过计算属性返回c;࿰可以使用c;否则，
<p>{。需要将传递值写入父组件中c;

注意：return结束后加分号。

<template> <div> <button ref="myButton" @click="handleClick">Click me</button> </div></template><script>export default { methods: { handleClick() { // 使用 $refs 访问 DOM 元素 this.$refs.myButton.innerText = 'Clicked!'; }, },};</script>

5.vue2如何获得最新的dom

this可以在vue2中使用.$nexttick获取最新dom。

this.$children[0].addata1(). provide和inject传值（#xff09依赖注射󿼉

#xfff00c;由父组件提供的数据󿀌子组件注入数据，用法与vue3相同，只能实现单个数据传值。

but() { this.$refs.pdom.innerHTML = "aaa"; this.$nextTick(() => { console.log(this.$refs.pdom); }); },

6.filters过滤器主要用于过滤数据，可同时调用多个过滤器  eg： <p>{。
1.vue2通过$parent实现组件传值-父传子
2.vue2 组件传值-子传父通过$children实现
3. provide和inject传值（#xff09依赖注射󿼉
4.vue2如何操作dom？
5.vue2如何获得最新的dom
6.filters过滤器
7.vue2的生命周期 。

$children可以在父组件中获取子组件中的数据和方法。传输非响应数据，可以以对象的形式传值。在provide选项中࿰中，响应效果将无法实现

注入非响应数据：

// 注入数据 inject: ['b'],

 注入响应数据：

// 注入数据 inject: ["num",'b'], // 响应式效果通过计算属性来实现 computed: { newnum() { return this.num(); }, },

4.vue2如何操作dom

在vue2中，