状态是什么：

页面中要显示的东西，放在一个变量中，每次更改完值，就会被拦截，同时再重新渲染页面；

状态的对立面就是属性；

可以没有状态，那只能用父组件传过来的属性来自己用；

自己没有状态，只能使用父组件的属性，那就成了父组件的傀儡了；

父传子属性：props

父组件props：

<template>
    <div>
        通信
        <--使用<navbar>组件-->
        <navbar myname="home" myid="111"></navbar>
    </div>
</template>
<script>
import navbar from './components/navbar.vue'
export default {
    components:{
        navbar
    }
}
</script>

子组件navbar：

<template>
    <div>
        <button>left</button>
        {{myname}}
        <button>right</button>
    </div>
</template>
<script>
export default {
    props:["myname","myid"],
    setup(data){
        console.log(data)//=>结果返回一个包含属性的对象
        console.log(data.myname,data.myid)
    }
}
</script>

重点说明：

子组件接收父组件传过来的属性，vue3中一样还是用props接收，不变：

props:["myname","myid"]

变的是：在js中使用：

• setup（）函数默认接收一个形参，代码中的data；
• 形参data：是一个包含着父组件传过来的属性的对象：

console.log(data)

结果：

 

所以我们可以通过data.myname ,data.myid来访问这两个属性：

console.log(data.myname,data.myid)

结果：

 

子传父事件：emit

子组件：绑事件

<navbar @event="change"></navbar>

 父组件里定义change函数：

const change=()=>{

       }

子组件里控制函数执行：

setup(data,{emit}){
     emit('event')
}

setup的第二个参数接收的是{emit}