当前位置：首页 > news >正文

资产管理公司网站建设方案/阿里巴巴seo排名优化

news 2025/6/30 23:42:12

资产管理公司网站建设方案,阿里巴巴seo排名优化,政府采购网上商城入围,武汉做企业网站的公司1、父组件通过props向子组件传值父组件：在子组件上使用:prop-name（注：子组件接收的字段），parentData（注：父组件想要传过去的值，可以是数组，对象，字符串&…

1、父组件通过props向子组件传值

父组件：在子组件上使用:prop-name（注：子组件接收的字段），parentData（注：父组件想要传过去的值，可以是数组，对象，字符串，布尔，数字等等）

<template><div><child-component :prop-name="parentData"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue'export default {components: {ChildComponent},data () {return {parentData: '这是父组件的数据'}}
}
</script>

子组件：props接收，可以直接在template中使用插值表达式也可以用this.xx打印

<template><div>{{ propName }}</div>
</template><script>
export default {props: {propName: {type: String, //类型default: "我是默认值", //不传显示的默认值}  },mounted(){console.log(this.propName)}
}
</script>

2、通过$emit向父组件传递数据

父组件：通过@子组件的方法='xxxxx' 进行调用自身的方法达到接收处理数据的接收参数

<template><div><child-component @custom-event="handleCustomEvent"></child-component><p>接收到的数据：{{ receivedData }}</p></div>
</template><script>
import ChildComponent from './ChildComponent.vue'export default {components: {ChildComponent},data () {return {receivedData: ''}},methods: {handleCustomEvent (data) {this.receivedData = data}}
}
</script>

子组件：通过this.$emit('方法名-父接收绑定的@xx名','我是传给父组件的数据')来像父组件传递数据进行通信

<template><button @click="handleClick">点击发送数据</button>
</template><script>
export default {methods: {handleClick () {this.$emit('custom-event', '这是子组件的数据')}}
}
</script>

3.$refs 父组件直接操作子组件实例

父组件：通过this.$refs.xxx 进行操作子组件的实例可以通过方法传值，可以直接改变子组件data中的数据

<template><div><child-component ref="childComponentRef"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue'export default {components: {ChildComponent},data () {return {}},mounted(){// 直接调用子组件的方法并且传值this.$refs.childComponentRef.init('1111')// 直接操作子组件的data中数据 改变值this.$refs.childComponentRef.dataNumber = 22} 
}
</script>

子组件：父组件传递过来直接使用就行或者父组件调用的方法子组件直接执行

<template><div></div>
</template><script>
export default {data() {return {dataNumber:1	}},mounted(){console.log(this.dataNumber) // 22},methods:{init(parentData){console.log(parentData) // 1111}}
}
</script>

4、Vuex 状态管理

首先，在你的 Vue.js 应用程序中安装 Vuex：
```
npm install vuex
```
创建一个名为 store.js 的新文件并在其中添加以下代码：
```
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {message: ''},mutations: {setMessage(state, payload) {state.message = payload}},actions: {updateMessage({ commit }, payload) {commit('setMessage', payload)}}
})export default store
```
上面的代码创建了一个新的 Vuex store，其中包含名为 message 的状态和两个方法：setMessage 和 updateMessage。setMessage 方法将接收到的值设置为 message 状态的新值，而 updateMessage 方法将调用 setMessage 方法并传递一个新值。

在你的组件中使用 Vuex 状态：

<template><div><input v-model="message"><button @click="submitMessage">提交</button></div>
</template><script>
import { mapActions } from 'vuex'export default {data() {return {message: ''}},methods: {...mapActions(['updateMessage']),submitMessage() {this.updateMessage(this.message)this.message = ''}}
}
</script>
//上面的代码创建了一个包含一个输入框和一个提交按钮的组件。
//当用户在输入框中输入文本并点击提交按钮时，submitMessage 方法将调用 updateMessage 方法，
//并将输入框中的值传递给它。

在另一个组件中访问 Vuex 的状态：

<template><div><p>当前消息: {{ message }}</p></div>
</template><script>
import { mapState } from 'vuex'export default {computed: {...mapState(['message'])}
}
</script>
//上面的代码创建了一个显示当前消息的组件。
//它通过使用 mapState 辅助函数从 Vuex store 中获取 message 状态，
//并将其作为计算属性暴露出来，以便在模板中使用。