vue 组件传值

父传子 通过 props

渐进式 父传子 示例
props --> properties(属性)
父组件

<!--发送数据给子组件comment id要传的值 -->
<comment :ids = "id"></comment> 

//导入子组件
import comment from '../subcom/comment.vue'

子组件

 <template>
    <div id="tmp1">
    	{{ids}}
    </div>
</template>


<script>
 	export default {
        name: "comment",
        props:["ids"],//接收newinfo组件传递的值
        data(){
         return{ }
        }
      }
</script>

子传父 通过事件

子组件

<template>
    <div id="tmp2">
        <!--点击加减组件-->
        <div class="inleft" @click="substrict">-</div>
        <div class="incenter" v-text="this.count"></div>
        <div class="inright" @click="add">+</div>
    </div>
</template>
<script>
    export default {
    	 methods:{
    	 substrict(){
                this.count--;
                if(this.count<1){ //不能小于1
                    this.count=1;
                }   
                this.sendmessage()             
            },
            add(){
                this.count++;
                this.sendmessage()   
            },
    	 	// 把商品数量发给 父组件
            sendmessage(){
                this.$emit('dataobj',this.count)
            }
		 }
    }
</script>

父组件

<template>
    <div id="tmp">
    	 <!--dataobj 接收inputNumber 商品数量数据-->
		<inputNumber v-on:dataobj="getcount"></inputNumber>
    </div>
</template>
<script>
 	import inputNumber from '../subcom/inputNumber.vue';
	export default {
		name: "goodsinfo",
        data(){
            return{
            	cun:''
            }
        },
		methods:{
			 //获取 inputNumber组件 传来的 商品数据
            getcount(count){
                this.cun = count;
            },
		},
        components:{ //导入子组件 轮播组件                       
           inputNumber
        }
    }
</script>

路由传值

// newlist  跳转 newinfo 传值
// newlist 
<router-link v-bind="{to:'/news/newinfo/'+item.id}">
<!--v-bind="{to:'/news/newinfo/'+item.id}"   常量+变量 -->

// newinfo  接收
 created(){
      //获取 路由 传入的id参数 赋值给this.id
      this.id = this.$route.params.id;
 }

跨页面传值

vm.js
import Vue from 'Vue';
export const COUNTSTR = 'COUNT';
export var vm = new Vue();

// goodsinfo.vue 传
<template>
    <div id="tmp">
    		<mt-button type="danger" size="small" @click="toshapcar"> 加入购物车</mt-button>
    </div>
</template>

<script>
	//使用 vm 对象 按需导入
    import {vm,COUNTSTR} from '../../kits/vm.js';
	    export default {
        name: "goodsinfo",
        data(){
            return{
                cun:1  
            }
        },
        methods:{
        		toshapcar(){
                //1、触发事件 把this.cun 发送给 vm.js 
                vm.$emit(COUNTSTR,this.cun);
                //console.log(vm,COUNTSTR) //拿到vm对象 常量COUNSTR               
            },
        }


 // app.vue 接收
 <template>
    <div>
 		<span id="badge" class="mui-badge">0</span>
    </div>
</template>

<script>
	//导入 vm.js  获取goodsinfo 的 商品数量参数
    import {vm,COUNTSTR} from './kits/vm.js';
	// 利用vm.$on() 来注册 COUNT 这个常量代表的事件
    vm.$on(COUNTSTR,function(count){
        // 获取vm.js 传来的参数  商品数量
        //把count追加到购物车中
        var badgeobj = document.getElementById("badge");
        badgeobj.innerText = parseInt(badgeobj.innerText)+count; //追加
    })
   
</script>

vuex传值

main.js
import Vuex from 'vuex'
import store from './store/store'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store
})

store.js
import Vue from 'vue'
import Vuex from 'vuex'

import app from './app'
import user from './user'

Vue.use(Vuex);

const store = new Vuex.Store({    
    modules:{ //把app和user组装到 store里面
        app,user
    }
})
export default store;

app.js
//存放app 相关的状态
import {INCRMONT,DECREASE} from './mutation_type'
const app = {
    // 用来存放 全局状态
    state:{
        count:0
    },
    // 使用mutations可以修改state的值(注意如果想异步操作，请对actions操作)
    mutations:{
        //incrmont(state){
        [INCRMONT](state,n){ //带参数 n    incrmont-->[INCRMONT] 用常量替代
            state.count += n
        },
        [DECREASE](state){
            state.count -= 1
        }    
    },
    // 业务逻辑
    actions:{
        // myInadd(context,n){
        //     //'incrmont' --> [INCRMONT]用常量替代
        //     context.commit(INCRMONT,n); //等同于 helloWorld 的 this.$store.commit('incrmont');
        //     const products = [1,2,3,5,6];
        //     return products
        // },
        // 异步写法
        async myInadd(context,n){
            //context.commit('incrmont');
            context.commit(INCRMONT,n); //传参
            const products = [1,2,3,5,6]//await axios.get(....);//拿到数据                
            return products
        },
        myIndel(context){
            context.commit(DECREASE); 
        }
    },
    // store的计算属性 类似computed
    getters:{
        myCount(state){
            return 'getters count  '+state.count
        }
    },
}

export default app;

user.js
//存放 用户相关的状态
const user = {
    state :{
        userinfo:null
    }
};

export default user;

mutation_type.js
//控制store mutations
export const INCRMONT = 'INCRMONT' // ++
export const DECREASE = 'DECREASE' // --  


<template>
  <div class="hello">
    <div>
        <button @click="add">+</button>
        <button @click="del">-</button>
    </div>
  </div>
</template>
<script>
	import { mapMutations,mapActions } from "vuex";
	import { INCRMONT,DECREASE } from "../store/mutation_type";
	export default {
		data () {
        	return {}
	    },
	    methods: {
	    	// 引入
			...mapMutations([INCRMONT,DECREASE]),
	        ...mapActions(["myInadd","myIndel"]),
			add(){
				this.$store.state.count += 1; //直接改变状态
			},
	        del(){
	       		//操作
	            this.$store.commit(DECREASE);//'decrease' --> DECREASE 常量替代
	            // 操纵 actions
	            //this.myIndel();
	        },
     	}
 // app.vue 接收
 // goodsinfo.vue 传