1：父组件向子组件传值
<div id="app">
<com :pad="msg" content="xiaoming"></com>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'这是父组件'
},
methods:{
},
components:{
data:{
},
com:{
template:'<h1>这是子组件{
{pad}}{
{content}}</h1>',
props:['pad','content'] /*这是一个数组专门获取父组件的数据*/
}
}
});
</script>
你可以发现在子组件中有了父组件的内容
父组件向子组件传值-props属性值类型
- 可以传递静态值
- 也可以传递动态值
- 动态值可以是 字符串 数字 布尔值 数组 对象（重点）
这里知识点要注意的就是绑定的问题
<div id="app">
<com :pad="msg" content=12></com>//请注意这里没有绑定的
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'这是父组件'
},
methods:{
},
components:{
data:{
},
com:{
template:'<h1>这是子组件{
{pad}}{
{typeof content}}</h1>',
props:['pad','content'] /*这是一个数组专门获取父组件的数据*/
}
}
});
如果不绑定的话它的类型就是string
如果绑定的话的话 就是number
<com :pad="msg" :content="12"></com>
其实父组件也可以想子组件传递数组，对象等
例：
<div id="app">
<com :pad="msg" :content=12 :parr="parr" :gif="gif"></com>
</div>
<script>
Vue.component('com', {
props: ['pad','content','parr','gif'],
template: `
<div>
<h1>这是子组件{
{pad}}{
{typeof content}} </h1>
<ul>
<li :key='index' v-for='(item,index) in parr'>{
{item}}</li>
</ul>
<p>{
{gif.name}}</p>
<p>{
{gif.age}}</p>
</div>
</div>
`
});
var vm=new Vue({
el:'#app',
data:{
msg:'这是父组件',
parr: ['apple','orange','banana'],
gif:{
name:'许爱明',
age:24
}
},
methods:{
},
});
要注意一点的事在局部写组件的时候这样传送数组会报错误的
2：子组件向父组件传值
- 子组件用$emit()触发事件
- $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
- 父组件通过事件监听监听子组件传递过来的数据
比如来做一个例子：点击子组件的按钮扩大父组件的字体大小
<div id="app">
<div :style='{fontSize: fontSize + "px"}'>{
{
pmsg}}</div>
<menu-item :parr='parr' @enlarge-text='handle'></menu-item>
</div>
<script src="../../js/vue-2.4.0.js"></script>
<script type="text/javascript">
/*
子组件向父组件传值-基本用法
props传递数据原则：单向数据流
*/
Vue.component('menu-item', {
props: ['parr'],
template: `
<div>
<ul>
<li :key='index' v-for='(item,index) in parr'>{
{item}}</li>
</ul>
<button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容',
parr: ['apple','orange','banana'],
fontSize: 10
},
methods: {
handle: function(){
// 扩大字体大小
this.fontSize += 5;
}
}
});
</script>
3：非父子组件之间传值
来做一个案例：比如点击test组件的按钮的时候，jest加一，
点击jest组件的按钮的时候，test加2
div id="app">
<test></test>
<jest></jest>
</div>
<script src="../../js/vue-2.4.0.js"></script>
<script>
//提供事件中心
var h=new Vue();
Vue.component("test",{
data:function(){
return{
num:0
}
},
template:
` <div>
<p>TOM:{
{num}}</p>
<button @click="tomb">点击</button>
</div>
`,
methods:{
tomb:function () {
//触发jom事件
h.$emit('jom-event',1);
}
},
mounted:function () {
h.$on('tom-event',(value)=>{
this.num+=value;
})
}
})
Vue.component("jest", {
data: function () {
return {
num: 0
}
},
template:
` <div>
<p>jOM:{
{num}}</p>
<button @click="tomb">点击</button>
</div>
`,
methods: {
tomb: function () {
h.$emit('tom-event',2);
}
},
mounted:function () {
h.$on('jom-event',(value)=>{
this.num+=value;
})
}
})
var app=new Vue({
el:'#app',
data: {
msg:''
}
});
</script>