一.父组件向子组件传递值使用props;
二.子组件向父组件传递值用this. $emit()
三.组件与组件值引用可采用vuex.
四.vuex是一个专为vue. js应用程序开发状态管理模式。集中式管理所有组件的状态。
五.利用插槽子组件向父组件传值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<jspang>
<span slot="blogUrl">{{jspangData.blogUrl}}</span>
<span slot="netName">{{jspangData.netName}}</span>
<span slot="skill">{{jspangData.skill}}</span>
</jspang>
</div>
<template id="tmp">
<div>
<p>博客地址:<slot name="blogUrl"></slot></p>
<p>网名:<slot name="netName"></slot></p>
<p>技能:<slot name="skill"></slot></p>
</div>
</template>
<script>
var jspang={
template:'#tmp'
}
var app=new Vue({
el:'#app',
data:{
jspangData:{
blogUrl:'http://jspand.com' ,
netName:'技术胖',
skill:'web前端'
}
},
methods:{
},
components:{
"jspang":jspang
}
})
</script>
</body>
</html>