组件基础—Vue学习笔记

ammm学习Vue有好几天了，今天遇到难点所以打算写一点随笔加深印象。

一、首先最简单的创建组件

1全局组件 Vue.component()

Vue.component('hello',{
        template:'<h1>hello world<h1>'
    })

然后就可以调用了，前提：你需要先设置Vue的接管范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="Vue.js"></script>
</head>
<body>
    <div id="vm">
        <hello></hello>
    </div>
</body>
<script>
    Vue.component('hello',{
        template:'<h1>hello world<h1>'
    })

    new Vue({
        el:'#vm'
    })
</script>
</html>

2. 局部组件

先在外部声明，然后在Vue实例中实例化

var hello={
        template:'<h1>hello world</h1>'
    }
    var app=new Vue({
        el:'#app',
        components:{
            hello:hello       //在此处生成局部组件两个hello可以不同
        }
    })

二、组件传值

1.父组件向子组件传值

最简单的方法通过 <slot></slot>传值

<hello></hello>里面的hiboy会传递到子组件中替代slot

<body>
    <div id="app">
        <hello>hiboy</hello>
    </div>
</body>
<script>
    Vue.component('hello',{
        template:'<h1><slot></slot></h1>'
    })
    var app=new Vue({
        el:'#app'
    })
</script>

常规方法通过props传值

<body>
    <div id="app">
        <hello message="hi boy"></hello>
    </div>
</body>
<script>
    Vue.component('hello',{
        props:['message'],//此处的值和dom里的值对应
        template:'<h1>{{message}}</h1>'//通过插值表达绑定数据
    })
    var app=new Vue({
        el:'#app'
    })
</script>

当然我们可能会遇到像这样的Bug

（当你在一个表格中使用组件时会发现...）

<body>
    <div id="app">
        <table>
            <tbody>
                <hello></hello>
                <hello></hello>
            </tbody>
        </table>
    </div>
</body>
<script>
    Vue.component('hello',{
        template:'<tr>Hi boy</tr>'//通过插值表达绑定数据
    })
    var app=new Vue({
        el:'#app'
    })
</script>

我们想要在表格的tbody中插入两个组件，组件为tr但是仔细看一下运行后的Dom

我们会发现插入的两个组件并没有在我们预想的tbody中（疑惑...）

解决方法：采用 is 声明

<body>
    <div id="app">
        <table>
            <tbody>
                <tr is="hello"></tr>//采用is把tr转化为hell组件
                <hello></hello>
            </tbody>
        </table>
    </div>
</body>
<script>
    Vue.component('hello',{
        template:'<tr>Hi boy</tr>'//通过插值表达绑定数据
    })
    var app=new Vue({
        el:'#app'
    })
</script>

看一下运行结果吧！

类似于以上情况的标签有 table、select、ul、ol

2.子组件向父组件传值

子组件向父组件传值主要通过向上层传递事件实现所需函数$emit(’事件名‘，值)//值可为空也可多个

<body>
    <div id="app">
        <hello @addnum="handleAddClick"></hello><!-- 接收子节点传过来的值 -->
        <h3>{{num}}</h3>
    </div>
</body>
<script>
    Vue.component('hello',{
        data:function(){                              //组件的data为一个函数
            return{
                number:0
            }
        },
        template:'<p @click="handleClick">{{number}}</p>',//number为data返回的值
        methods:{
            handleClick:function(){
                //这里点击一次我们让自身加一
                this.number++;
                //向上传递事件给父节点
                this.$emit('addnum',1);//第一个参数为事件名，第二个为所需要传的值，这里我们传1，当然可以传多个值
            }
        }
    })
    var app=new Vue({
        el:'#app',
        data:{
            num:0
        },
        methods:{
            handleAddClick:function(step){
                this.num+=step;
            }
        }
    })
</script>

注意：组件的data是一个函数通过返回值来实现

接下来我们通过两个子组件的值计算出父组件的值。此时我们会引入一个新的东西 ref 它可以让我们获取所需dom

<body>
    <div id="app">
        <hello @addnum="handleAddClick" ref="one"></hello><!-- 接收子节点传过来的值 -->
        <hello @addnum="handleAddClick" ref="two"></hello>
        <h3>{{num}}</h3>
    </div>
</body>
<script>
    Vue.component('hello',{
        data:function(){                              //组件的data为一个函数
            return{
                number:0
            }
        },
        template:'<p @click="handleClick">{{number}}</p>',//number为data返回的值
        methods:{
            handleClick:function(){
                //这里点击一次我们让自身加一
                this.number++;
                //向上传递事件给父节点
                this.$emit('addnum');
            }
        }
    })
    var app=new Vue({
        el:'#app',
        data:{
            num:0
        },
        methods:{
            handleAddClick:function(){
                this.num=this.$refs.one.number+this.$refs.two.number;
            }
        }
    })
</script>

通过this.$refs.one我们可以获得ref="one"的组件以及其内的所以内容，

this.$refs.one.number获取了组件中的number

Ok就是这样，至于最基础的模板语法就自己看官方文档吧。