父组件通过自定义属性来传值,子组件通过props来接收。
三个注意事项:
- props接收的数据不允许修改,修改就要报错
- 我们可以在子组件data定义一个属性,专门用来接收父组件传过来的数据,在mounted里面赋值,但是由于mounted执行一次,所以这种方式,初始值是一样的,后面父组件变,子组件不变;子组件变,父组件不变
- 如果你想实现父变子变,子变父变,那么就传递一个json
代码案例
<!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>
<script src="./vue.js"></script>
<style>
.box {
width: 80%;
margin: 20px auto;
border: 1px solid orange;
}
</style>
</head>
<body>
<div id="app">
</div>
<template id="ap">
<div class="box">
<h1>this is app</h1>
<v-parent></v-parent>
<p>123132</p>
</div>
</template>
<template id="parent">
<div class="box">
<h1>this is parent component</h1>
<p>pData:{{pData}}</p>
<input type="text" v-model="pData">
<hr>
<p>parent data2:{{pData2}}</p>
<input type="text" v-model="pData2">
<hr>
<p>msg:{{json.msg}}</p>
<input type="text" v-model="json.msg">
<v-child a="10" b="20" c="30" :p="pData" :p2="pData2"
:j="json"
></v-child>
</div>
</template>
<!--页面可以用的数据有:data computed props -->
<!-- 1.props接收的数据不允许修改,修改就要报错 -->
<!-- 2.我们可以在子组件data定义一个属性,专门用来接收父组件传过来的数据,在mounted里面赋值,但是由于mounted执行一次,所以这种方式,初始值是一样的,后面父组件变,子组件不变;子组件变,父组件不变 -->
<!-- 3.如果你想实现父变子变,子变父变,那么就传递一个json -->
<template id="child">
<div class="box">
<h1>this is child component</h1>
<p>cData:{{cData}}</p>
<input type="text" v-model="cData">
<p>a:{{a}}</p>
<p>b:{{b}}</p>
<p>parent data:{{p}}</p>
<!-- 1.直接修改父组件传过来的值会报错 -->
<input type="text" v-model="p">
<hr>
<!-- 2.一次性赋值 后面父子无关 -->
<p>parent data2:{{p22[0]}}</p>
<input type="text" v-model="p22">
<hr>
<!-- 3.父变子变,子变父变 -->
<p>parent msg:{{j.msg}}</p>
<input type="text" v-model="j.msg">
</div>
</template>
<script>
let vChild = {
template: "#child",
props:['a','b','p','p2','j'],
data(){
return {
cData:"this is child data",
p22:""
}
},
// 挂载完成
mounted(){
this.p22=this.p2;
//
/*var x=10;
var y=x;
x=20;*/
/*var json={
msg:"王者荣耀"
}
var j=json;
j.msg="王者荣耀123";*/
}
}
let vParent = {
template: "#parent",
data(){
return {
pData:"this is parent data",
pData2:["this is parent data233"],
json:{
msg:"王者荣耀"
}
}
},
components: {
vChild
}
}
let App = {
template: "#ap",
components: {
vParent
}
}
new Vue({
el: "#app",
data: {
},
methods: {},
watch: {},
computed: {},
template: "<App></App>",
components: {
App
}
})
</script>
</body>
</html>