父组件向子组件传值 通过props接受
vue使用中,经常会用到组件,好处是:
1、如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了;
2、页面内容会简洁一些;方便管控;
props可以对象的形式接受
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<com :msg='msg'></com>
</div>
<template id="tem">
<div>
<span>当前数量位:{{count}}</span><br>
{{msg}}
</div>
</template>
<script src="./js/vue.js"></script>
<script>
let com = Vue.extend({
template: '#tem',
data () {
return{
count: 0
}
},
// props: [
// 'msg'
// ]
props: {
msg: {
type: String,
default: '我是默认值父组件没有给我数值!!!'
}
}
});
var vm = new Vue({
el: '#app',
data:{
msg: '我是父组件数据'
},
methods:{
},
components:{
'com':com
}
})
</script>
</body>
</html>
props中type支持的类型有:String、Number、Boolean、Array、Object、Date、Function、Symbol
子组件传递数据或者事件到父组件中 用$emit来实现
可以使用自定义事件来完成;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<com :msg='msg' @ale='alertMsg'></com>
</div>
<template id="tem">
<div>
<span>当前数量位:{{count}}</span><br>
{{msg}}
<button @click="client">点我有惊喜</button>
</div>
</template>
<script src="./js/vue.js"></script>
<script>
let com = Vue.extend({
template: '#tem',
data () {
return{
count: 0
}
},
// props: [
// 'msg'
// ]
props: {
msg: {
type: String,
default: '我是默认值父组件没有给我数值!!!'
}
},
methods: {
client () {
this.$emit('ale','count');
}
}
});
var vm = new Vue({
el: '#app',
data:{
msg: '我是父组件数据'
},
methods:{
alertMsg (msg) {
alert('我被调用了!!!'+msg);
}
},
components:{
'com':com
}
})
</script>
</body>
</html>
父组件调用子组件方法 用$ref来调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="saveAdd">加一</button>
<com ref='add'></com>
</div>
<template id="tem">
<div>
{{count}}
</div>
</template>
<script src="./js/vue.js"></script>
<script>
let com = Vue.extend({
template: '#tem',
data () {
return{
count: 1
}
},
methods:{
addCount () {
this.count++;
}
}
});
var vm = new Vue({
el: '#app',
methods:{
saveAdd () {
console.log(this.$refs.add.count);
this.$refs.add.addCount()
}
},
components:{
'com':com
}
})
</script>
</body>
</html>