vue 组件间传值
2023-09-27 14:26:43 时间
1、父组件给子组件传值
父组件:
<template>
<child :name="name"></child>
</template>
<script>
import child from "./child.vue"
export default {
components: {child},
data(){
return {name:"二哈"}
}
}
</script>
子组件:
<template>
<div>{{name}}</div>
</template>
<script>
export default {
props:["name"]
}
</script>
2、子组件给父组件
父组件:
<template>
<child @childToParent="reviceSondata"></child>
</template>
<script>
import child from "./child.vue"
export default {
components: {child},
methods:{
reviceSondata(data){
console.log(data);
}
}
}
</script>
子组件:
<template>
<button @click="dataTofather">点击</button>
</template>
<script>
export default {
data () {
return {
message: '啦啦啦啦'
}
},
methods:{
dataTofather(){
this.$emit("childToParent",this.message,true);
}
}
}
</script>
3、vuex
store.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
headImg: JSON.parse(sessionStorage.getItem('headImg')) || ""
},
mutations: {
newImg(state, msg){
sessionStorage.setItem('headImg', JSON.stringify(msg))
state.headImg = msg;
}
}
})
export default store
main.js中引入vuex
import Vue from 'vue';
import Vuex from 'vuex';
import store from './vuex/store';
Vue.use(Vuex);
var v = new Vue({
el: '#app',
router,
store,
components: {index},
template: '<index/>',
created: function () {
}
})
传值:this.$store.commit("newImg", value);
取值:this.$store.state.headImg
github地址:vue传值
相关文章
- Vue 非单文件组件
- VUE 在一个组件中引用另外一个组件的两种方式
- vue的自定义组件如何使用prop传值?
- 精品微信小程序二手交易小程序+后台管理系统|前后分离VUE
- vue.js:父组件访问子组件children-refs笔记
- vue.js:父子组件的实训案例watch实现
- 深刻理解Vue中的组件
- [Vue] 04 - Parameter Passing
- Vue.js之组件传值
- vue组件间的11种传值方式
- Vue技术19单文件组件
- 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
- 【Vue全家桶】Options API
- vue自定义组件传值的三种办法(最全整合,含实例)
- vue 实现实时获取大文件下载进度
- ubuntu docker 部署 vue 项目
- Vue.js双向绑定的实现原理
- 封装 Vue 组件并使用 NPM 发布
- Vue-全局添加组件
- vue.js2.0父组件点击触发子组件方法
- webpack入坑之旅(五)加载vue单文件组件
- 简约至上,Vue圆环菜单组件
- vue elment.style样式修改(第三方组件自生成元素)