Vue 组件传参

1、父子组件传参

　　1.1 父组件向子组件传值

• 父组件代码

父组件使用v-bind动态向子组件传值

<template>
　　<div>
　　　　<--! 使用子组件 -->
　　　　<sub-component :id="class_id"></sub-component>
　　</div>
</template>
<script>
// 引入一个子组件Sub
import SubComponent from '@/components/SubComponent' 
export default{ 
　　name:"parent", 
　　components:{ SubComponent },
　　data(){
　　　　return{
　　　　　　class_id:"213456674321",
　　　　}
　　}
}
</script>

• 子组件代码

子组件使用props属性接收父组件传过来的值 props可以是数组或对象
<template>
   <div>
     我是子组件
　　　{{id}}  <!-- 显示父组件传过来的值 213456674321 -- > 
　　</div> 
</template>

<script>
export default{

　　name:'child',
　　props:{
　　　　id:{
　　　　　　type:String, // 限定父组件传过来值的类型
　　　　　　required:true, //是否是必须传的值
　　　　},
　　　　total:{
　　　　　　default:11, //默认值
　　　　}
　　}
}
</script>

　　1.2 子组件向父组件传值

• 子组件代码  （子组件通过vm.$emit给父组件传值）

<template>    
　　<div>        
　　　　<button @click="change"></button>    
　　</div>
</template>
<script>
export default{
    name:'child',
    data(){
        return {
            changeVal:'333'
        }
    },
    methods:{
        change(){
            this.$emit('parentChange',changeVal); // vm.$emit('父组件绑定事件','子组件向父组件传的值')
        }
    }
}
</script>

• 父组件代码<template>

    <div>
        <!-- parentChange 子组件 vm.$emit 绑定的事件 -->
        <sub-component @parentChange="accept"></sub-component>
    </div>
</template>
<script>
export default{
    name:'parent',
    data(){
        return{
            parentVal:'',
        }
    },
    methods:{
        accept(val){
            // val => 子组件传过来的值
            this.parentVal = val; //把子组件传来的值赋给 parentVal
        }
    }
}
</script>