vue组件传值

父向子传值
通过标签属性传值
如果子组件的props接收了那这个标签属性就具有props特性
如果子组件的props没有接收 那这个标签属性就是一个普通的自定义属性。

父组件如何向子组件传值
父组件通过标签属性的形式向子组件传值。
子组件可以通过props属性正常接收到来自父组件的值。
但值得注意的是子组件接收到父组件的值后不应该修改接收到的值，
因为该值果然是一个对象，而且 被几个子组件共同引用着，很有可以会导致脏数据。

非得要改怎么办？
转存一份，再改。
在vue中组件传值是要单项数据流的，子组件不能随意来修改父组件的值。
Props特性
最终不会表现在dom节点
子组件拿到了props之后就等于拿到了一个data
非props特性
会表现在都dom中。
prpop的验证：
我们可以为组件的prop指定验证要求，例如你知道的这些类型。
如果有一个需求没有被满足则vue会在控制台警告，
props:[]数组：数组的每一项表示接受父组件传过来的那些属性
props：{}对象，通过键值对的形式表示接受父组件传过来的属性。

  Vue.config.productionTip=false;

    //父组件传递给子组件的数据是响应式的
    Vue.component("v-count",{
        props:["count","updatecount"],
        template:"<span @click='clickFn'>{{count}}</span>",
        methods:{
            clickFn(){
                //通过vue的自定义事件修改父组件的数据
                this.updatecount(2)
            }
        }
    })
    Vue.component("v-count",{
        props:["count","updatecount"],
        template:"<span @click='clickFn'>{{count}}</span>",
        methods:{
            clickFn(){
                // 通过vue的自定义事件修改父组件的数据
                this.updatecount(2)
            }
        }
    })

    //父
    new Vue({
        el:"#app",
        data:{count:1},
        methods:{
            updatecount(num){
                this.count+=num
            }
        }
    })

 Vue.config.productionTip=false;

    //父组件传递给子组件的数据是响应式的
    Vue.component("v-count",{
        props:["count"],
        template:"<span @click='clickFn'>{{count}}</span>",
        methods:{
            clickFn(){
                //通过vue的自定义事件修改父组件的数据
                // this.updatecount(2)
                this.$emit("updatecount",3)
            }
        }
    })

    //父
    new Vue({
        el:"#app",
        data:{count:1},
        methods:{
            updatecount(num){this.count+=num}
        }
    })

子先父传值
1，父亲向儿子传一个props，这个props是一个函数。
2，通过 vue自定义事件

非父子
总线机制
pubsub