Vue-留言列表

一：该例使用到的知识点

效果图：

1. 注意子组件引用时名称的书写方式 eg:
Vue.component(‘vInput’,{}), 这里子组件名称为vInput, 则引用时需要这样书写：

      
    
    否则会报错： make sure to provide the ‘name’ option
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181213140413196.png)

2:v-model的用法：
v-model是数据双向绑定，对于自定义的input标签应该这样实现：
一：template模板下：
(1)对于子组件 ：1，模板中需要注册input事件，2，需要动态绑定value,3，通过$emit(‘input’,’’)将数据传递给父组件。
其中value对应子组件的value值，也是input输入框的值。

 Vue.component('vTextarea',{
            template: ``,
            props: ['message','value'],
            data: function () {
                return {
                    dmessage: this.message
                }
            },
            methods: {
                uContent: function (event) {
                    this.$emit('input', event.target.value)
                }
            },
        });

(2):然后v-model进行接收该数据。其实v-model= v-on:input=“fucnction(){}”,代码如下：
content对应父类的data中content变量

二：对于render函数v-model数据双向绑定如下：
需要设置的地方有两个 1：domprops 2：on，

render: function (createElement) {
            var _this = this;
            return createElement('textarea',{
                    domProps: {
                        value: this.value   // 这就相当于 ：value="value"
                    },
                    on: {
                        input: function(event){   // 子组件的input方法
                            _this.value = event.target.value;
                            _this.$emit('input',event.target.value);    //传递给父类
                        }
                    }
                })
        },

（2）：然后调用子组件：

三：避免 v-if与v-for用于同一元素，这样 可能会导致v-else失效

四：父子组件之间的访问
父类访问子组件 如果代码如下：
子组件设置ref

  
  
   template:`
`,

父类应该这样访问：

console.log(this.$refs.names)    //VueComponent{}对象
  console.log(this.$refs.names.$el.children[0]) //  

下面这张图可以说明一切：

4：所以父类控制子组件聚焦可以用以下代码：

this.$refs.names.$el.children[0]：focus()

完整代码如下：

    
    
    
    
  


    
    

        

        
        
        发布