一、组件通讯
<body>
<div id="app">
<!-- 父组件 -->
<h2>子组件</h2>
<cpn :number1="num1" :number2="num2" @num1change="num1Change" @num2change="num2Change"></cpn>
<h2>父组件</h2>
<h4>num1:{
{num1}}</h4>
<input type="text" v-model="num1" />
<h4>num2:{
{num2}}</h4>
<input type="text" v-model="num2" />
</div>
<!-- 子组件 -->
<template id="cpn">
<div>
<h4>dnumber1:{
{dnumber1}}</h4>
<h4>number1:{
{number1}}</h4>
<input type="text" v-model="dnumber1" />
<h4>dnumber2:{
{dnumber2}}</h4>
<h4>number2:{
{number2}}</h4>
<input type="text" v-model="dnumber2" />
</div>
</template>
<script src="vue.js"></script>
<script>
const cpn = {
template: '#cpn',
data() {
return {
dnumber1: this.number1,
dnumber2: this.number2
}
},
props: {
number1: {
type: [Number, String]
},
number2: {
type: [Number, String]
}
},
watch: {
number1(n) {
this.dnumber1 = n * 100
},
number2(n) {
this.dnumber2 = n * 100
},
dnumber1(n) {
this.$emit('num1change', n / 100)
},
dnumber2(n) {
this.$emit('num2change', n / 100)
},
}
}
const app = new Vue({
el: "#app",
data() {
return {
num1: 1,
num2: 2
}
},
components: {
cpn
},
methods: {
num1Change(val) {
this.num1 = val
},
num2Change(val) {
this.num2 = val
},
},
computed: {
}
})
//1.尽量不要直接使用props里面的值进行页面渲染
//2.接收的数据类型