Vue框架，父组件向子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--1.父组件在引用子组件的时候，通过v-bind的形式，把需要传递给子组件的数据以属性绑定的形式传递给子组件，-->
<test :sonmsg="msg"></test>
</div>
<!--定义模板内容用ID与组件关联-->
<template id="box">
<div>
<h1>局部组件 ---{{sonmsg}}</h1>
</div>
</template>
</body>
</html>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'这是父组件'
},
methods:{
},
components:{
//组件名：{配置项}
'test':{
template:'#box',
//用props来接收,即现在props数组里定义一下，定义完了才能使用
//props 里面的值只能读取，无法重新赋值
//注意：组件中所有的props数据，都是通过父组件传给子组件的
props:['sonmsg']
},
}
})
</script>
把方法传给子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--父组件向子组件传递方法，使用的是v-on事件绑定机制，要自定义一个事件属性，然后把 父组件的方法传给这个属性，这样我们的子组件就能通过某些方式来调用父组件的方法-->
<test @func="show"></test>
<p>{{datamsg}}</p>
</div>
<!--定义模板内容用ID与组件关联-->
<template id="box">
<div>
<h1 @click="myClick">局部组件</h1>
</div>
</template>
</body>
</html>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'这是父组件',
datamsg:'',
},
methods:{
show(data){
console.log("调用了父组件身上的show");
console.log(data);
this.datamsg = data;
}
},
components:{
//组件名：{配置项}
'test':{
template:'#box',
data(data){
return {
sonmsg:'这是子组件的数据',
}
},
methods:{
myClick(){
//当点击子组件按钮时，触发父组件身上的show（）
//$emit()
//this.$emit('func');
this.$emit('func',this.sonmsg)
}
}
},
}
})
/*
* 总结：
* 1.子组件的数据和父组件的数据相互独立不能共用
* 2.父传子，用props，props要在子组件设置，与data平级
* 3.子传父，需要借助自定义事件触发，触发要用到$emit()方法
*
* */
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
