正文
2.1 Vue组件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Vue组件
- 全局组件和局部组件
-
父子组件通讯-数据传递
父->子：通过Props传递
子->父：不允许，但vue通过子组件触发Emit来提交给子组件进行触发 - Slot
more
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>
