Vue组件的使用

组件使用的细节点

全局组件

Vue.component('row',{
    data: function(){
        return {
            content:'this is content'
        }
    }
    template: 'this is a row '
})

后面只能跟,所以不能直接写标签，写成

通过ref获取dom

通过ref来获取页面上的dom

hello world
this.$refs.hello.innerHTML //整个Vue实例里面所有的引用里面有一个叫hello的引用，获取到对应的dom节点，也就是那个

若在一个组件中添加上ref，那么获取到的dom就是对应的组件，也就是可以获取到组件的引用。

可以获取到组件中定义的data数据

父子组件传值

局部组件

var counter={
    template: '
0
'
}
var vm = new Vue({
    el: '#root',
    components: {
        counter: counter
    }
})

父组件传值给子组件

父组件传值给子组件通过属性来传。

1. 在组件中定义一个属性

2. 子组件中通过props来接收父组件传过来的值

   
    
   
   var counter={
    props: ['count']
       template: '
   {{count}}
   '
   }
   

3. 单向数据流，子组件不能直接修改父组件的值。而是应该在自己的data上定义一个值，父组件传

过来的值赋值给定义的值，然后修改那个值

子组件向父组件传值

子组件通过事件触发来向父组件传值

//子组件
handleClick: function(){
    this.$emit('change',2) //子组件向外触发一个change事件，2是传过来的参数
}

//父组件

父组件通过@change来接收到子组件传过来的信息
handleInc: function(step){  //step是子组件传过来的参数
    this.total = this.total+step
}

组件参数校验与非props特性

组件参数校验

定义一个全局组件

Vue.component('child',{
    template: '
Child
'
})

父组件给子组件通过属性传递一些值，而子组件做的一些约束就是组件的参数校验

Vue.component('child',{
    props: {
        content：Number //约束content传过来的数据是数字类型
        key:[ Numver, String],
        content: {
            type: String,  //content传入的类型是字符型
            required: true,  //user必须传
            default: 'default' //给user一个默认值
            validator: function(value){  //校验传进来的内容，长度大于5
                return (value.length>5)
            }
        }
    }
    template: '
Child
'
})

非props特性

父组件要传一个名叫content的属性，而子组件刚好定义了content的prop，这个就是props特性

非props特性

1. 父组件传，但子组件不接收
2. 子组件不能使用父组件的值
3. 子组件的dom标签会显示父组件的属性

给组件绑定原生事件

例如：给子组件的标签中定义一个click事件

//下面的实现是错误的

methods: {
    handleClick:function(){
        alert('click')
    }
}

上面的实现是错误的，原因就是在子组件中定义的@click中的click是监听的自定义事件的名称，它是接收子组件触发的事件名称，如：this.$emit('click')，@click是接收这样的事件的，并不是我们熟知的点击事件

实现上面的例子

方法一：

Vue.component('child',{
    template: '
Child
'  
    //这里的click就是原生的点击事件
}

方法二

在click中添加.native就可标明为原生事件

非父子组件间的传值

方法一，使用Vuex

方法二，使用发布订阅模式，也称为总线机制

1. 创建子组件child
2. 在prototype上挂载一个bus属性，指向一个vue，以后每个vue实例上都有bus属性

Vue.prototype.bus = new Vue()

3. 在子组件模板中定义一个点击事件
4. 通过bus触发事件发送信息，然后同样通过bus来接收发送的信息

methods: {
    handleClick: function(){
        this.bus.$emit('change',this.content)
    }
}
mounted: function(){
    var _this = this;
    //监听change事件
    this.bus.$on('change',function(msg){
        _this.content = msg
    })
}

在Vue中使用插槽（slot）

怎么使父组件给子组件优雅的传递dom，例如父组件要给子组件传递

Dell

按以往的方法应该是

//接收数据
props: ['content']
template: `
`  //看得出来，这样每次都会多了一个
标签

使用slot可以解决问题

    
Dell


template: `
` //slot的内容就是子组件中的dom内容

如果template中有多个，那怎么确定哪个slot要那些dom呢

可以通过名称来确定对应的dom，如

    
header
    
header

template: `
` //slot的内容就是子组件中的dom内容

Vue中的作用域插槽

1. 父组件调用子组件的时候，给子组件传递作用域插槽，作用域插槽必须是