Vue创建组件

● 组件中参数的意义

参数	代码	介绍
data	data:function (){ return { msg: ‘自定义的数据’， msg2:‘定义2’ } }	1.组件中定义的数据 2.组件中的 data 和实例中的 data 使用方式完全一样, 但实例中的data可以是一个对象，组件中必须是一个方法。 3.这个方法内部，必须返还一个对象才行；
template	template:' #templ',	这里写HTML模板—无论是哪种方式创建出来的组件，组件的 template 属性指向的模板内容，必须有且只有唯一的一个根元素
props	props:['msg'],	1.把父组件传递过来的 msg 属性，先在 props 数组中定义一下。 2.props中的数据都是只读的
$emit(‘方法’)	this.$emit(‘func’)	子组件用来调用父组件传递过来的方法

● 定义全局组件

第一种

<div id="app">

<my-com1></my-com1>

</div>
<script>
//使用Vue.component('组建的名称'，创建出来的组件模板对象)
//如果 使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，在引用组件的时候需要把大写的驼峰改为小写的字母并用‘-’连接		
//如果没有用驼峰命名，则直接拿名称来使用即可
Vue.component('myCom1',Vue.extend({
    template:'<h3>这是使用 Vue.extend 创建的组件</h3>' //通过template 属性，指定组件要展示的html结构
}))

var vm=new Vue({
    el:'#app',
    data:{ 
    },
    methods:{
    }
})

</script>
}))

第二种 （简化第一种）

Vue.component('mycom2',{
    template:'<div><h3>这是使用 Vue.extend 创建的组件</h3><span>123</span></div>'
})

第三种 (推荐)

 	<div id="app">
        <mycom3></mycom3>
 	</div>
   // 在 被Vue控制的 #app外面，使用 template 元素，定义组件的HTML模板结构
	 <template id="templ">
       	<div>
            <h1>通过 template 元素，在外部定义的组件结构，这个方式有代码的提示</h1>
            <h4> {{ msg }} ok,nice! </h4>
            
        </div>
 	</template>

  <script>
	 Vue.component('mycom3', {
            template: '#templ',
            data:function(){
            return {
            	msg:'组建中data定义的数据'
            }
         }
     })
     var vm = new Vue({
       el: '#app',
       data: {},
       methods: {}
     })
  </script>

● 定义私有组件

 	<div id="app">
         <login></login>
 	 </div>
	<template id="templ">
        <div>
            <h1>通过 template 元素，在外部定义的私有组件结构</h1>
            <h4>{{ msg }}ok,nice!</h4>
        </div>
	</template>
 	var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components : {
        login:{
           template:'#templ',
           data:function(){
            return {
            	msg:'组建中data定义的数据'
            }
         }
        }
   	  }
    })

● 组件切换

可直接用路由来切换组件

单独切换

这里我们使用一个标签：<component> 来战士对应名称的组件
component是一个占位符 ， ：is属性 ，可以用来指定要展示的组件的名称

<div id="app">
    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>
    <component :is="comName"></component>
</div>
<script>
    //组建的名称是字符串
    Vue.component('login',{
        template:'<h3>登录组件</h3>'
    })
    Vue.component('register',{
        template:'<h3>注册组件</h3>'
    })

var vm=new Vue({
    el:'#app',
    data:{ 
        comName:'login'
    }
})

</script>

加动画

<style> 
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
           
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 1.8s ease;
        }
    </style>
<transition mode="out-in">//out-in属性代表先移除再进入
 	<component :is="comName"></component>
</transition>

● 父组件向子组件

传值

将vue实例看做父组件，定义的私有组件当做子组件

1.定义父组件中的数据

data:{
        msg:'这是父组件中的数据'
     },

2.在父组件中调用子组件

//父组件可以再引用子组件的时候通过属性绑定（v-bind：）的形式，
//把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 
<div id="app">
    <com1 :parentmsg="msg"></com1>
</div>

3.定义一个私有组件当做子组件

components:{
        com1:{
            template:'<h1> 这是子组件-----  {{ parentmsg }}</h1>',
            //把父组件传递过来的 parentmsg 属性，现在 props 数组中定义一下。
            //props中的数据都是只读的
            props:['parentmsg'],
        },
       
    }

完整代码：

div id="app">
    // 父组件可以再引用子组件的时候通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
    <com1 :parentmsg="msg"></com1>
</div>
<script>
var vm=new Vue({
    el:'#app',
    data:{
        msg:'这是父组件中的数据'
     },
    methods:{},
    components:{
        data(){//子组件中的data数据是自身私有的 和父组件无关。比如通过ajax 请求回来的数据，都可以放到 data 身上；
            //是可读可写的
            return {
                title:'123',
                content:'qqq'
            }
        },
        //子组件中默认无法访问到 父组件中的data 数据和methods 中的方法
        com1:{
            template:'<h1> 这是子组件-----  {{ parentmsg }}</h1>',
            //把父组件传递过来的 parentmsg 属性，现在 props 数组中定义一下。
            //props中的数据都是只读的
            props:['parentmsg'],
        },
       
    }
})

</script>

传方法+子组件把传的数据传回父组件

<div id="app">
        <!-- 父组件向子组件传的方法 ，使用 事件绑定机制 （v-on  @） -->
        <com2 @func="show"></com2>
    </div>

    <template id="tmpl">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="这是子组件中的按钮,点击触发父组件方法" @click="myclick">
        </div>

    </template>

    <script>
        //定义一个自变量类型的 组件模板对象
        var com2 = {
            template: '#tmpl',//通过制定一个id，表示 要去加载的template元素中的内容当做 组件的HTML 结构
            data(){
                return {
                    sonmsg:{name : '大头儿子',arg : 6}
                }
            },
            methods:{
                myclick(){
                    
                    //触发调用  当点击子组件按钮时，拿到父组件传递过来的 func 方法并传值
                    this.$emit('func',this.sonmsg)
                }
            }
        }

        var vm = new Vue({
            el: '#app',
            data: {
                datamsgFormSun:null
            },
            methods: {
                show(data) {
                    console.log('父组件的 show 方法---'+data)
                    console.log(data)
                    this.datamsgFormSun=data
                }
            },
            components: {
                com2
            }
        })

    </script>