Vue学习：模板使用1

base-input.vue

<template>
    <div id = 'base-input'>
        <input v-on='deallisteners' v-bind:incontent='incon' v-on:input="$emit('input',$event.target.value)">
    </div>
</template>
<script>
    export default{
        name:'base-input',
        data(){
            return{
            }
        },
        /* 在自定义组件中，想要使用v-model实现数据的双向绑定，需要在组件定义的时候使用到model */
        model:{
            prop:"incon",
            event:'input'
        },
        /* 仍然需要在props中定义变量 */
        props:{
            incon:String
        },
        /* 当组件根元素不具备一些DOM事件的时候，想要让其内部元素具有一定的事件，无法通过.native来实现，可以使用$listeners获取父元素传递的事件 */
        computed: {
            deallisteners(){
                var vm=this
                return Object.assign(
                    {},
                    this.listeners,
                    {
                        focus:function(event){
                            vm.$emit('focus','focus')
                        }
                    }
                )
            }
        },
    }
</script>

dayone.vue

<template>
    <div id='dayone'>
        <p>2019.12.19 Vue学习笔记</p>
        <base-input v-model='incontent' v-on:focus='show_input'></base-input>
        <p>聚焦的提醒：{{input_info}}，通过$listeners实现</p>
        <p>输入的内容：{{incontent}}，通过v-model实现</p>
    </div>
</template>
<script>
    import baseinput from './parts/base-input'
    export default{
        name: 'dayone',
        data(){
            return {
                lovingVue:false,
                msg:'no',
                
                incontent:'',
                input_info:'',
            }
        },
        methods:{
          show: function(info){
              this.msg=info
          } ,
          show_input:function(m){
              this.input_info=m
          }
        },
        components:{
           'base-input':baseinput
        }
    }
</script>
<style>
</style>