vue第五天

vue组件：一些知识点的记录

1. 全局组件

<aaa></aaa>
var Aaa=Vue.extend({
    template:'<h3>我是标题3</h3>'
});

Vue.component('aaa',Aaa);

*组件里面放数据: data必须是函数的形式，函数必须返回一个对象(json)

2. 局部组件：放到某个组件内部

var vm=new Vue({
    el:'#box',
    data:{
        bSign:true
    },
    components:{ //局部组件
        aaa:Aaa
    }
});

---

另外一种编写方式:

Vue.component('my-aaa',{
        template:'<strong>好</strong>'
    });

    var vm=new Vue({
        el:'#box',
        components:{
            'my-aaa':{
                template:'<h2>标题2</h2>'
            }
        }
    });

---

配合模板:

1. template:'<h2 @click="change">标题2->{{msg}}</h2>'

2. 单独放到某个地方－［推荐］
    a).     <script type="x-template" id="aaa">
                <h2 @click="change">标题2->{{msg}}</h2>
            </script>
    b).    <template id="aaa"> 
                <h1>标题1</h1>
                <ul>
                    <li v-for="val in arr">
                        {{val}}
                    </li>
                </ul>
            </template>

---

动态组件:

<component :is="组件名称"></component>

---

vue-devtools -> 调试工具

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

---

vue默认状况下，子组件也无法访问父组件数据

---

组件数据传递: √

1. 子组件就想获取父组件data

在调用子组件：
        <bbb :m="数据"></bbb>

子组件以内:
        props:['m','myMsg']

        props:{
            'm':String,
            'myMsg':Number
        }

2. 父级获取子级数据

*子组件把本身的数据，发送到父级

vm.$emit(事件名,数据);

v-on:    @

---

vm.$dispatch(事件名,数据)     子级向父级发送数据
vm.$broadcast(事件名,数据)    父级向子级广播数据
配合: event:{}

在vue2.0里面已经，报废了

---

slot:

位置、槽口 做用: 占个位置

相似ng里面 transclude  （指令）