因为父子组件之间的单项数据流，子组件props:[]接收父组件的内容，能使用，但是不能更改，要更改的话，可以有2种办法：
1.子组件methods里面使用
$emit（）,然父组件更改父组件传过来的变量，子组件里面使用的父组件里面传过来的数据就可以改变
2.子组件自己定义一个变量来接收父组件的内容，然后子组件内部更改子组件定义的变量，相当于自己更改自己。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 根组件
const app = Vue.createApp({
// 定义传值的变量
data() {
return {
content: 1,
};
},
// 逻辑,子组件$emit（）向组件提交addOne,父组件处理子组件需要父组件做的事
methods: {
// 这个num是子组件里面提交的$emit()里面的第二个参数
handleAddOne(num) {
this.content += num;
},
},
// 模板
template: `
<h1 @click="handleAddOne"> <Son :content="content" /> </h1>
`,
});
// 全局子组件
app.component("Son", {
// 接收传过来的并使用
props: ["content"],
// 变量,如果使用父组件传过来的值并且改变这个值
// 用$emit告诉父组件，在父组件里面修改传过来的值
// 逻辑
// 点击了以后，用$emit告知父组件需要做的事，$emit("addone",2)
// $emit（）里面第一个参数是父组件要做的事，第二个参数可以在父组件里面使用，具体看父组件的逻辑
methods: {
handleClick() {
this.$emit("addOne","2");
},
},
// 模板
template: `
<h1 @click="handleClick">{{content}}</h1>
`,
});
// 跟组件绑定到div里面
const vm = app.mount("#root");
</script>
</html>
