【Vue】父子组件传值

这次不借助webpack实现。
其实都是比较基础的东西，但是很多小细节也蛮有意思的。

子传父

1. 通过$emit使得父组件可以通过v-on监听子组件中绑定的方法

• 点击Button后传参

1. 子组件代码：

let ChildComponent = {
   
    data() {
   
         return {
   
             childValue: ''
         }
     },
     methods: {
   
         passValueToFather() {
   
             this.$emit('get-value', this.childValue);
         }
     },
     template: `
         <div>
             <input v-model="childValue" placeholder="请输入子组件值">
             <button @click="passValueToFather">传值给父组件</button>
         </div>
     `
 };

2. 父组件代码

let FatherComponent = {
   
    data() {
   
        return {
   
            fatherValue: 'Father'
        }
    },
    methods: {
   
        getValueFromChild(val) {
   
            this.fatherValue = val;
        }
    },
    template: `
        <div>
            {
    { fatherValue }}
            <child-component @get-value="getValueFromChild"></child-component>
        </div>
    `,
    components: {
   
        'child-component': ChildComponent // 注册子组件
    }
};

3. Vue实例初始化

var vm =