App.vue:
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<!-- <br>
ref:<input type="text" v-model="msg"><br>
无ref:<input type="text" v-model="msg2">
<button @click="updataMsg">修改msg</button>
<h1>{{msg}}</h1>
<h1>{{msg2}}</h1>
<h2 @click="changeFn">{{flag}}</h2>
<button @click="updataName">修改姓名</button> |
<button @click="delAge">删除年龄</button> |
<button @click="addSchool">新增学校</button> |
<h1>姓名:{{obj.name}} 年龄:{{obj.age}} 学校:{{obj.school}}</h1> -->
<!-- <comp-b :msg="msg" @changzi="changzi"/> -->
<h1 @click="str1Change">{{msg1}}</h1>
<h1 @click="objChange">{{obj.name}}--{{obj.age}}</h1>
<h1 >{{str}}</h1>
<h1>{{s}}</h1><hr>
<comp-c/>
</template>
<script>
import CompC from './components/CompC.vue'
import {computed, reactive, ref, watch,provide} from 'vue'
/* import CompB from './components/CompB.vue' */
export default {
name: 'App',
components:{
/* CompB */
CompC
},
/* created(){
console.log('created');
}, */
/* setup 函数出现的速度比created要快 执行的顺序比creatd要快 */
setup:function(){
/* 基本数据类型ref */
/* 引用数据类型reactive */
/* console.log('setup');
let msg = ref('你好');
let msg2 = ('你好');
let flag = ref(true);
let obj = reactive({
name:'张三',
age:30
})
function updataMsg(){
msg.value = '我修改了msg'
}
function changeFn(){
flag.value = false
}
function updataName(){
obj.name = '李四'
}
function delAge(){
delete obj.age
}
function addSchool(){
obj.school = '北大'
}
return {
msg:msg,
msg2:msg2,
updataMsg:updataMsg,
flag:flag,
changeFn:changeFn,
obj:obj,
updataName:updataName,
delAge:delAge,
addSchool:addSchool
} */
/* let msg = ref('谢谢你')
function changzi(s){
msg.value = s
}
return{
msg,
changzi
} */
let msg1 = ref('听我说谢谢你')
let str2 = ref('因为有你')
let obj = reactive({
name:"张三",
age:30
})
/* vue3中使用provide 实现爷孙组件通信 */
/* 提供数据 提供的数据名 数据值 */
provide('info',obj)
let str = computed(()=>{
return msg1.value +str2.value
})
let s = computed(()=>{
return msg1.value +str2.value+'温暖了四季'
})
function str1Change(){
msg1.value = 'ssadsad'
}
/* 在vue3中使用watch监听器 监听基本数据类型 */
/* watch 第三个参数使用{immediate:true} 实现已进入页面立即监听*/
/* watch(str,(newV,oldV)=>{
console.log('新值是:'+newV);
console.log('旧值是:'+oldV);
},{immediate:true}) */
function objChange(){
obj.name = 'lisi'
}
/* vue3中实现对引用数据类型obj的监听 */
/* watch(obj,()=>{
console.log('我被监听了');
}) */
/* watch 对 对象里面单独的某一个属性进行监听的时候需要使用箭头函数的方式 */
watch(()=>obj.name,()=>{
console.log('name被监听了');
})
return{
msg1,
str2,
str,
s,
str1Change,
obj,
objChange
}
}
}
</script>
CompB组件：
<template>
<!-- vue3 支持多个根元素 -->
<h1 @click="changeZ">{{msg}}</h1>
<h1>{{msg}}</h1>
</template>
<script>
export default {
props:['msg'],
/* ！！ setup 里面的this不指向vue实例 */
setup(props,{emit}){
/* 在setup 里面使用props的数据,需要借助于setup方法第一个参数 */
/* console.log(props.msg); */
/* 在setup 中 使用子改父,需要借助于setup方法的第二个参数 */
/* console.log(context); */
function changeZ(){
emit('changzi','因为有你')
}
return{
changeZ
}
}
}
</script>
<style>
</style>
CompC组件：
<template>
{{c}}
</template>
<script>
import {inject} from 'vue'
export default {
setup(){
/* 在vue3中导入inject 来实现爷孙通信,记得把值return出去 */
const c = inject('info')
return{
c
}
}
}
</script>
<style>
</style>
