<template>
  <div id="app">
    <h1>Hello Vue Component</h1>
    <Left/>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'

export default {
  components: {
    Left
  }
};
</script>

import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

Vue.config.productionTip = false

Vue.component('MyLeft', Left)
Vue.component('MyRight',Right)

<script>

export default {
    // 组件的自定义属性，简单的方式
    // 可以在外面使用时，可以自定义设置，传输
    // props是一个数组
    // props: ['customInitValue'],

    // 如果要对自定义属性设置默认值，那么就需要用下面这种对象的方式进行定义
    props: {
        customInitValue: {
            // 设置自定义属性的默认值
            default: 0,
            // 设置自定义属性的类型
            type: Number,
            // 这个属性是必填项，自定义组件要传这个值
            required: true
        }
    },

    data() {
        return {
            count: 0,
            // 自定义属性是只读的，如果需要对自定义属性的值做修改，可以把它设置到data属性中
            customInitCount: this.customInitValue
        };
    },
};
</script>

//传递的是字符串属性
<Counter customInitValue="3"></Counter>
//使用v-bind:传递的是数字
<Counter :customInitValue="12"></Counter>

<style lang="less" scoped>
#counter {
    background-color: beige;
}
</style>

#right {
    background-color: brown;

    // 使用场景：项目UI中使用了第三方库的UI组件，开发中要自定义修改第三方库组件的样式，又不能直接拿第三库的源码修改，可以通过/deep/深层修改
    // 使用/deep/ p修饰的样式 编译器最终会转成[data-v-001] p{}父子选择器的形式
    /deep/ p {
        background-color: pink;
    }
}

</style>

vue-template-compiler

    <div id="left">
        Left - 组件
        <Counter v-bind:customInitValue="3"></Counter>
    </div>
</template>

<MyLeft></MyLeft>

<template>
    <div>
        当前计数：{{count}}
        <button @click="increat">+1</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        };
    },
    methods: {
        increat() {
            this.count += 1
            this.$emit('numchanged', this.count)
        }
    },
};
</script>

<Child @numchanged="handleChildChange"></Child>

import Vue from 'vue'

export default new Vue()

    <div id="left">
        <button @click="sendMsg">发送好诗给Right组件</button>
    </div>
</template>
<script>
import bus from '../event/EventBus'
export default {
    components: {
        Counter
    },
    data() {
        return {
            message: '黑云压城城欲摧, 甲光向日金鳞开'
        };
    },
    methods: {
        sendMsg() {
            bus.$emit('sendMsg', this.message)
        }
    },
};
</script>

<template>
    <div id="right">
        Right 子组件 {{reciveMsg}}
    </div>
</template>

<script>
import bus from '../event/EventBus'

export default {
    data() {
        return {
            reciveMsg: ''
        };
    },
    created() {
        bus.$on('sendMsg', (val) => {
            this.reciveMsg = val
        })
    }

};
</script>

<template>
    <div>
        <h2>引用组件</h2>
        <hr>
        <p ref="pRef">鹅鹅鹅，曲项向天歌</p>
        <button @click="changeColor">点击变色</button>
    </div>
</template>

<script>
export default {
    methods: {
        changeColor() {
            console.log(this);
            this.$refs.pRef.style.color = 'red'
        }
    },
};
</script>

<template>
  <div id="app">
    <h1>Hello Vue Component</h1>
    <h2>Child组件的计数为：{{supCount}}</h2>
    <button @click="resetZero">将计数重置为0</button>
    <hr>
    <input v-if="visibelInput" @blur="hideInput" ref="iptRef" type="text">
    <button v-else @click="showInput" >请输入文字</button>
    <hr>
    <!-- 3.使用组件 -->
    <Child ref="child" @numchanged="handleChildChange"></Child>
  </div>
</template>

methods: {
    handleChildChange(val) {
      console.log(val);
      this.supCount = val
    },
    resetZero() {
      console.log(this);
      this.$refs.child.count = 0
    },
    showInput() {
      this.visibelInput = true
      this.$nextTick(()=>{
        this.$refs.iptRef.focus()
      })
    },
    hideInput() {
      this.visibelInput = false
    }
  }