2.1 Vue组件

Vue组件

• 全局组件和局部组件
• 父子组件通讯-数据传递
  父->子：通过Props传递
  子->父：不允许，但vue通过子组件触发Emit来提交给子组件进行触发
• Slot

import Counter from './conuter' //导入组件

components:{//注册局部组件
    Counter //加载组件
  }

<Counter v-bind:num="num"></Counter><!-- 调用组件 v-bind 绑定动态变量 -->

父组件传递到子组件,使用props:["a"],使用:a=""

子组传递到父组件，使用$emit("a")触发，使用@a=""

//父组件
<Modal :mdShow="mdShowCart" @close="mdCloseCart"></Modal>

//子组件.vue
<script>
    export default{
        props:['mdShow'],//父组件的数据需要通过 prop 才能下发到子组件中
        methods:{
            mdClose(){
                this.$emit('close');//子组件往父组件里传数据通过`emit()`触发，通过emit来触发父组件的方法，相当于jquery里的trigger， 复杂项目用Vuex
            },
        }
    }
</script>

slot

//父组件
<Modal>
   <p slot="massage">成功加入购物车！</p>
</Modal>

//Modal组件
<slot name="massage"></slot>

//刷新子组件
<evaluate-list ref="EvaluateList" :fwid="fwid" ></evaluate-list>
<a @click="$refs.EvaluateList.getViewEvaluate();">在线评价</a>