一：父组件给子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--父组件可以在引用子组件的时候,通过属性(v-bind)绑定的形式,把需要传递给子组件的数据
以属性绑定的形式传递到子组件内部,供子组件使用 -->
<com1 v-bind:parentmsg="msg"></com1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: "我是父组件"
},
methods: {
},
components: {
//经过演示发现子组件中默认无法访问到父组件中的data上的数据和methods中的方法
com1: {
template: '<h1 @click="change">这是子组件---{{parentmsg}}</h1>',
//注意:组件中的所有props中的数据都是通过父组件传递给子组件的
//把父组件传递过来的parentmsg属性,先在props数组中定义以下,这样才能使用这个数据
//props中的数据都是只读的,无法重新赋值
props: ['parentmsg'],
data() { //注意:子组件中的data数据,并不是通过父组件传递过来的,而是子组件自身私有的,比如:子组件通 过Ajax请求回来的数据都可以放到data身上
//data上的数据都是可读可写的
return {
}
},
methods: {
change(){
this.parentmsg="我被修改了"
}
}
}
}
})
</script>
</body>
</html>
二:父组件把方法传递给子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 父组件向子组件传递方法，使用的是事件绑定机制，当我们自定义了一个事件属性之后，那么子组件就能通过某些
方式来调用传递进来的这个方法了 -->
<com @func="show"></com>
<!-- 如果show后面有括号,则是将show的结果传递给click,没有括号就是直接把这个方法给它 -->
</div>
<template id="tmp">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮,点击触发父组件传递过来的func方法" @click="myclick">
</div>
</template>
<script>
//子组件
var com = {
template: '#tmp',
data() {
return {
sonmsg: {
'name': 'xx',
'age': 5
}
}
},
methods: {
myclick() {
// this.$emit('func', 123)
this.$emit('func', this.sonmsg)
}
},
}
//父组件
var vm = new Vue({
el: '#app',
data: {
fathermsg:null
},
methods: {
//括号里传参,也可不传,可传多个
show(data) {
console.log("调用了父组件上的show方法" + data);
this.fathermsg=data
}
},
components: {
com
}
})
</script>
</body>
</html>
三:子组件给父组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<com1 v-bind:parentmsg="msg" @func="getmsgFromson"></com1>
</div>
<template id="tmp1">
<div>
<h1>这是子元素---{{parentmsg}}</h1>
<input type="button" value="向父组件传递消息" @click="sendmsg">
</div>
</template>
<script>
var com1={
template:"#tmp1",
data() {
return {
msg:'子组件给父组件传值'
}
},
methods:{
sendmsg(){
this.$emit('func',this.msg)
}
},
props:['parentmsg']
}
var vm = new Vue({
el: "#app",
data: {
msg:'这是父元素',
msgFromson:''
},
methods: {
//子组件传递的data
getmsgFromson(data){
this.msgFromson=data;
console.log(this.msgFromson);
}
},
components:{
com1
}
})
</script>
</body>
</html>