父传子用属性，子传父用事件

父传子实现(通过属性)

html部分

<div id="box">
    <navbar myname="电影"></navbar>
    <navbar myname="影院"></navbar>
</div>

js部分

子组件

Vue.componet("navbar",{
    props:["myname"],
    template:`<div><button>left</button><span>{{myname}}</span><button>right</button></div>`

注意，这里的props并不是只可以传递成数组类型，它也可以是一个对象，且对象中允许包含各种属性以实现props校验。可以参考下面的示例。

export default {
  props: {
    // 基础类型检查
    //（给出 `null` 和 `undefined` 值则会跳过任何类型检查）
    propA: Number,
    // 多种可能的类型
    propB: [String, Number],
    // 必传，且为 String 类型
    propC: {
      type: String,
      required: true
    },
    // Number 类型的默认值
    propD: {
      type: Number,
      default: 100
    },
    // 对象类型的默认值
    propE: {
      type: Object,
      // 对象或者数组应当用工厂函数返回。
      // 工厂函数会收到组件所接收的原始 props
      // 作为参数
      default(rawProps) {
        return { message: 'hello' }
      }
    },
    // 自定义类型校验函数
    propF: {
      validator(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 函数类型的默认值
    propG: {
      type: Function,
      // 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
}

父组件

new Vue({
    el:"#box"
)}

子传父

html部分

<div id="box">
    <navbar @myevent="handleEvent"></navbar>
</div>

子组件

Vue.componet("navbar",{
    props:["myname"],
    template:`<div><button @click="handeleClick()>子传父实现</button></div>`,
    methods:{
        handleClick(){
            this.$emit("myevent",10000)

父组件

new Vue({
    el:"box",
    data:{},
    methods:{
        handleEvent(data){ //这里的data就是子组件中传来的10000
            console.log("data:",data),
        }