1.组件的使用：Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件。

1-1：全局组件

This is my first component!'
})
// 2.注册组件，并指定组件的标签，组件的HTML标签为Vue.component('my-component', myComponent)
new Vue({
el: '#app'
});" _ue_custom_node_="true">

注

1. Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例。

2. Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。

3. 使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器。

4. Vue.component()方法内部会调用组件构造器，创建一个组件实例。

5. 组件应该挂载到某个Vue实例下，否则它不会生效。

每个组件都是相互独立的，如果共用一个对象，在更改某个组件时会影响其他组件，

如果是函数返回自己独立的数据，就可以实现互不影响。

所以vue中组件的数据都是函数形式

1-2：局部组件:

let vm = new Vue({
    el :"#app",
    components :{
    hello :{
                    template: 'Parent',
    }
    }
})

调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue实例下使用如果不需要全局注册，

或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册

1-3:父子组件：

let vm = new Vue({
        el :"#app",
        components :{
        parent :{
        template :'Parent',
        components :{
        child :{
        template :"Child"
        //可以无限嵌套组件
        }
        }
        }
}
})

Child组件是在Parent组件中注册的，它只能在Parent组件中使用,在页面中使用标签渲染parent组件的内容，

同时child组件的内容也被渲染出来

2.props(父组件传递给子组件数据):

组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。

如果我们想使父组件的数据，则必须先在子组件中定义props属性。

let vm = new Vue({
        el:"#app",
        components:{
            parent:{
                template:"{{name}}",
data(){
return {name:"张三"}
},
                components:{
                    child:{
                        template:"{{childName}}",
                        props:["childName"]
},
}
}
}
})

单向数据流

Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。 
另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。 
在两种情况下，我们很容易忍不住想去修改 prop 中数据：

1.Prop 作为初始值传入后，子组件想把它当作局部数据来用。可以定义一个局部变量，并用 prop 的值初始化它：

props: ['initialCounter'],data: function () {return { counter: this.initialCounter }}

2.Prop 作为原始数据传入，由子组件处理成其它数据输出。定义一个计算属性，处理 prop 的值并返回：

props: ['size'],computed: {normalizedSize: function () {return this.size.trim().toLowerCase()}}

自定义事件

子组件与父组件通信

new Vue({
        el: '#app',
        components: {
        parent: {//------>声明定义一个父组件
        template: "{{name}}",
        //接受到发射的事件并且声明一个方法a
        data() {
        return {name: "张三"}
        },
        methods: {
        a(data) {//在这里定义方法a，参数data就是子组件通过$event发射的数据
        this.name = data
        }
        },
        components: {
        child: {//----->子组件
        template: "{{name}}",
        //给子组件绑定事件
        data() {
        return {name: "张小三"}
        },
        methods: {
        fn() {//----->向上发射一个事件标识，把需要传递的数据一起传递到子组件上
        this.$emit("event", this.name)
        }
        }
        }
        }
        }
        }
})

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue教程【六】-vue组件二