Vue中的组件

Vue常用的三种传值方式有：
父传子 用属性传
子传父 用事件传
非父子传值 第三方量
组件（component）：是Vue最轻大的功能之一。 组件化开发
特点：组件可以扩展HTML元素，封装可重用代码。
组件在命名是不可以使用HTML中的元素
组件分为全局与局部：
全局注册为

<div id="itany">
<组件名></组件名>//组件名不能用HTML元素

</div>
Vue.component('组件名'，{
  template:`<p>这是组件的全局注册</p>`
})
new Vue({
  el:'#itany'
})

局部注册为：

<div id="itany">
<组件名></组件名>
</div>
    new Vue({
        el:'#itany',
        components:{
            '组件名':{
                template:`<p>1581</p>`
            }
        }
    })

组件中可以写多个Vue.component
例如：

<div id="app">
<my-itany></my-itany>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('my-itany',{
        template:`
        <div>
            <p>第一行</p>
            <you-itany v-bind:message="mas"></you-itany>
        </div>
        `,
        data:function(){
            return{
                mas:'asfg'
            }
        }
    })
    Vue.component('you-itany',{
        props:['message'],
        template:`
        <div>
            <p>{{message}}</p>
        </div>
        `
    })
    new Vue({
        el:'#app'
    })
</script>

注意：在组件中data选项必须是一个函数且有返回值
组件中可以正常使用vue中的指令
例如：

<div id="itany">
<n-component></n-component>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('n-component',{
        template:`
        <div>
            <p>{{message}}</p>
            <button v-on:click="add">按钮</button>
        </div>
        `,
        data:function(){
            return{
                message:'dcgf'
            }
        },
        methods:{
            add:function(){
                alert(11111)
            }
        }
    })
    new Vue({
        el:'#itany'
    })
</script>

组件props

选项props是父子组件间的桥梁
props格式为：props：[' 自定义属性'],
例如：

<div id="app">
<my-mother></my-mother>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('my-mother',{
        template:`
            <div>
                <my-tit v-bind:tit="title"></my-tit>
            </div>
        `,
        data:function(){
            return{
                arr:['banana','apple','orange'],
                title:'水果贩卖'
            }
        }
    })
    Vue.component('my-tit',{
        props:['tit'],
        template:`
            <p>{{tit}}</p>
        `
    })

//输出结果为：水果贩卖

子传父用事件传（$emit）

this.$emit('自定义事件'，参数)。

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件

举个最基本的例子：

<div id="itany">
    <my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('my-father',{
        template:`
            <div>
                <p>{{message}}</p>
                <my-son @send="jieSend"></my-son>
            </div>
        `,
        data:function(){
          return{
              message:''
          }
        },
        methods:{
          jieSend:function(text){
              this.message=text
          }
        }
    })
    Vue.component('my-son',{
        template:`
            <button @click="send">传递</button>
        `,
        data:function(){
            return{
                msg:'Who are you?'
            }
        },
        methods:{
            send:function(){
                this.$emit('send',this.msg)
            }
        }
    })
    new Vue({
        el:'#itany'
    })
</script>

输出结果为点击button出现Who are you？

13921236-2dad795215cef90e.png

的公共实例but，作为中间仓库来传值

<div id="app">
    <father></father>
    <son></son>
</div>
<script src="js/vue.js"></script>
<script>
    //引入公共的but，来做为中间传达的工具
    var but = new Vue();
    Vue.component('father',{
        template:`
            <div>
                <h1>我是father组件</h1>
                <button @click="send">发送</button>
            </div>
        `,
        data:function(){
            return{
                mas:'who are you'
            }
        },
        methods:{
            send:function(){
                but.$emit('sends',this.mas)
            }
        }
    })
    Vue.component('son',{
        template:`
            <div>
                <h1>我是son组件</h1>
                <a href="">{{mass}}</a>
            </div>
        `,
        data:function(){
            return{
                mass:''
            }
        },
        mounted:function(){
            but.$on('sends',mas=>{//箭头函数的this指向不同，文章最后有‘this指向详细解析的网页’
                this.mass=mas
            })
        }

    })

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

箭头函数this指向详细解析：https://www.cnblogs.com/dongcanliang/p/7054176.html（如有需要请跳转网页观看）