开发者社区> 哈你真皮> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

vue 组件间传值

简介: 1、父组件给子组件传值 父组件: <template> <child :name="name"></child> </template> <script> import child from ".
+关注继续查看

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传值

原文地址:https://segmentfault.com/a/1190000017362027

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
精通Vue.js系列 │ 组件的递归
在一个组件的模板中,还可以嵌套自身组件,这样就构成了组件的递归。为了避免无限递归,需要设置递归的结束条件。
0 0
Vue.js组件中的slot 内容分发详解
Vue.js组件中的slot 内容分发详解
0 0
精通Vue.js系列 │ 注册全局组件和局部组件
普通Vue组件按照使用范围,可以以下分为两种: (1)全局组件:通过Vue应用实例的component()方法注册,可以直接被其他Vue组件访问。 (2)局部组件:只有父组件通过components选项注册了一个局部组件,父组件才能访问该局部组件。 无论是全局组件还是局部组件,都具有data、methods、computed和watch等选项,而且和根组件一样,也具有类似的生命周期及生命钩子函数。
0 0
Vue.js中的组件通信
Vue.js中的组件通信
0 0
Vue.js中的组件通信
Vue.js中的组件通信
0 0
精通Vue.js系列实例教程 │ Vue组件的单向数据流
为了简化组件的数据传递过程,避免因为在某个组件中随意修改数据而出现混乱,Vue框架提供了以下建议: (1)单向传递组件的属性,即由父组件把属性值传递给子组件的属性。 (2)在子组件中不随意修改由父组件传入的对象或数组类型的属性的内容。
0 0
精通Vue.js系列 │ Vue组件的命名规则
每个Vue组件都有一个名字。组件的名字可以采用lower-kebab-case(小写且短横隔开)或者upper-camel-case(大写且驼峰式)命名规则。
0 0
精通Vue.js系列实例教程 │ Vue组件的数据监听
如果Vue组件的一个变量num会被频繁更新,并且当变量num每次被更新时,需要进行一系列耗时的操作,如访问远程服务器的资源,或者通过复杂耗时的运算更新那些依赖变量num的其他变量(如result变量)。在这种情况下,可以通过Vue框架的数据监听器Watcher实现对变量num的监听。
0 0
Vue组件注册
全局注册VS局部注册 全局注册 组件注册后,可在全局使用,并且全局组件之间也可以相互嵌套着使用
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载