父组件向子组件传值
格式:
子组件用父组件的数据,用props数组来接收,是一个数组,名称对应接收,并且是只读的
new Vue({
//下面是父作用域
el:'#app',
data: {
//定义父组件数据
meg:'123父组件的数据'
},
components: {
//下面是子作用域
data () {
//定义子组件的数据,子组件内部私用数据,data中的数据可读可写
return {
title:'123',
content:'qq'
}
},
//子组件用父组件的数据,用props来接收,是一个数组,名称对应接收,并且是只读的
coml:{
props: ['parentmsg'],
template:'<h1>这是子组件===={{parentmsg}}</h1>'
}
}
});
控制区域
<div id="app">
<!-- 父组件可以在引用 子组件的时候,通过属性绑定的形式,把
需要传递给子组件的数据,供子组件使用
-->
<coml :parentmsg="meg"></coml>
</div>
子组件向父组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--//导入js包-->
<script src="js/vue.js"></script>
<!-- Bootstrap -->
<link href="./bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<link href="./css/Animate.css" rel="stylesheet">
</head>
<body>
<div id="app">
<com2 @fun="show"></com2>
</div>
<template id="tmpl">
<div>
<h1>这是子组件</h1>
<input type="button" value="调用父组件方法" @click="myclick">
</div>
</template>
<script type="text/javascript">
var com2={
template:'#tmpl',
//子组件的方法
methods: {
myclick(){
//用emit触发,调用父组件的方法
this.$emit('fun',789)
}
}
}
new Vue({
//下面是父作用域
el:'#app',
data: {
//定义父组件数据
meg:'123父组件的数据'
},methods: {
show(data){
console.log("这是父组件方法"+data);
}
},
components: {
com2:com2
}
});
</script>
</body>
</html>