Vue-组件传值

父组件给子组件传值：

1 子组件里面定义: props:['变量名1','变量名2']

2 在父组件通过子组件标签属性设置: 变量名1="值1" 变量名2="值2"

3 子组件里面使用: this.变量名1 this.变量名2

<div id="app">
    <input type="text" v-model='test'>
    <son v-bind:title='test'></son>
</div>
<script src="./vue.js"></script>
<script>
    Vue.component('son', {
    props: ['title'],
    data() {
        return {
           test1: this.title
         }
     },
     template: `<div>
            <h1>{{title}}</h1>
            <h2>{{test1}}</h2>
            </div>`,
     })
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    test: 'hello'
                }
            }
        })
</script>

如果希望父组件值的变化实时传入子组件：

== 直接使用 : this.变量名1 this.变量名2

如果只是希望获取父组件传入的初值，以后就没有关系了

== 在子组件data定义变量，设置他的值 = this.变量名1

== 使用的时候就使用data里面定义的变量

子组件通过自定义事件给父组件传值：

1 由父组件在子组件标签上监听一个自定义事件: myEvent

2 父组件给该事件设置一个事件处理函数

3 子组件通过this.$emit('myEvent','传入事件处理实参1','传入事件处理实参2',...)触发自定义事件，并传值

    Vue.component("son",{
        template:`<button @click="clickHandler">点我触发自定义事件</button>`,
        data(){
            return{
                msg:'我是自定义事件'
            }
        },
        methods:{
            clickHandler(){
                this.$emit('myEvent',this.msg)
            }
        }
    })
    new Vue({
        el:'#app',
        template:`<div id='app'>
            <son @myEvent='myEventHandler'></son>
                </div>`,
        methods:{
            myEventHandler(a){
                console.log(a);
            }
        }
    })