<vue 组件 2、组件参数传递>
代码结构
一、 01-父组件向子组件传递数据
1、 效果
展示出来的数据都是父组件传给子组件的数据
2、代码
01-父组件向子组件传递数据.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn :cmessage="message" :cbooks="books"></cpn>
</div>
<template id="cpn">
<div>
<ul>
<li v-for="item in cbooks">{{item}}</li>
</ul>
<h2>{{cmessage}}</h2>
</div>
</template>
<script src="vue.js"></script>
<script>
// 父传子: props
let cpn = {
template: '#cpn',
//简单写法
// props: ['cbooks', 'cmessage'],
props: {
// 1.类型限制
// cbooks: Array,
// cmessage: String,
// 2.提供一些默认值, 以及必传值
cmessage: {
type: String,
default: 'a',
required: true
},
// 类型是对象或者数组时, 默认值必须是一个函数
cbooks: {
type: Array,
default () {
return []
}
}
},
data() {
return {}
},
methods: {
}
}
const app = new Vue({
el: '#app',
data: {
message: 'hello world',
books: ['三国演义', '西游记', '水浒传', '红楼梦']
},
components: {
cpn
}
})
</script>
</body>
</html>
二、 02-父传子(props中的驼峰标识)
1、 效果
2、代码
02-父传子(props中的驼峰标识).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn :c-info="info" :child-my-message="message" ></cpn>
</div>
<template id="cpn">
<div>
<h2>{{cInfo}}</h2>
<h2>{{cInfo.name}}</h2>
<h2>{{cInfo.age}}</h2>
<h2>{{cInfo.height}}</h2>
<h2>{{childMyMessage}}</h2>
</div>
</template>
<script src="vue.js"></script>
<script>
let cpn = {
template: '#cpn',
props: {
cInfo: {
type: Object,
default () {
return {}
}
},
childMyMessage: {
type: String,
default: ''
}
}
}
let app = new Vue({
el: '#app',
data: {
info: {
name: 'yc',
age: 25,
height: 1.83
},
message: 'hello world'
},
components: {
cpn
}
})
</script>
</body>
</html>
三、03-子传父(自定义事件)
1、效果
点击后将父组件的参数，传递给子组件并展示
2、代码
03-子传父(自定义事件).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--父组件模板-->
<div id="app">
<div>
父组件调用子组件
<cpn @item-click="cpnClick"></cpn>
</div>
<div>
父组件展示子组件传来的参数
{{book}}
</div>
</div>
<!--子组件模板-->
<template id="cpn">
<div>
<ul>
<li v-for="item in books" @click="btnClick(item)"> {{item.id}}----{{item.name}}</li>
</ul>
</div>
</template>
<script src="vue.js"></script>
<script>
// 1.子组件
let cpn = {
template: '#cpn',
data() {
return {
books: [{
id: 'A',
name: '子组件数据-三国演义'
},
{
id: 'B',
name: '子组件数据-西游记'
},
{
id: 'C',
name: '子组件数据-红楼梦'
},
{
id: 'D',
name: '子组件数据-水浒传'
},
]
}
},
methods: {
btnClick(item) {
// 发射事件: 自定义事件
this.$emit('item-click', item)
}
}
}
// 2.父组件
let app = new Vue({
el: '#app',
data: {
message: '你好',
book: []
},
components: {
cpn
},
methods: {
cpnClick(item) {
console.log('cpnClick', item);
this.book = item
}
}
})
</script>
</body>
</html>
四、04-子组件改父组件参数
1、效果
2、代码
04-子组件改父组件参数.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
<h2>父组件的参数num1 ：{{num1}}</h2>
</div>
<cpn :number1="num1" @zichange="change" />
</div>
<template id="cpn">
<div>
<h2>子组件的参数：</h2>
<h2>props:{{number1}}</h2>
<h2>data:{{dnumber1}}</h2>
<input type="text" :value="dnumber1" @input="num1Input">
</div>
</template>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
num1: 1
},
methods: {
change(item) {
this.num1 = item
}
},
components: {
cpn: {
template: '#cpn',
props: ['number1'] ,
data() {
return {
dnumber1: this.number1
}
},
methods: {
num1Input(event) {
// 1.将input中的value赋值到dnumber中
this.dnumber1 = event.target.value;
;
// 2.为了让父组件可以修改值, 发出一个事件
this.$emit('zichange', this.dnumber1)
}
}
}
}
})
</script>
</body>
</html>
五、05-watch实现子组件改父组件参数
1、效果
子组件数值改变后，父组件的数据跟着改变，效果和上一个例子一样只是这里实现使用的是watch方法
2、代码
05-watch实现子组件改父组件参数.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
<h2>父组件的参数num1 ：{{num1}}</h2>
</div>
<cpn :number1="num1" @zichange="change" />
</div>
<template id="cpn">
<div>
<h2>子组件的参数：</h2>
<h2>props:{{number1}}</h2>
<h2>data:{{dnumber1}}</h2>
<input type="text" v-model="dnumber1">
</div>
</template>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
num1: 1
},
methods: {
change(value) {
this.num1 = value
}
},
components: {
cpn: {
template: '#cpn',
props: ['number1'],
data() {
return {
dnumber1: this.number1
}
},
watch: {
//这里的dnumber1不能随便写 必须和参数名称完全一致
dnumber1(newValue) {
this.dnumber1 = newValue;
this.$emit('zichange', newValue);
}
}
}
}
})
</script>
</body>
</html>
