SOURCE

//子组件定义
var child = Vue.component('child', {
    props: ['pname'],
    methods: {
        change_child_name: function(){
						this.pname = '3333'
        },
    },
    template: '<div><p>子组件的名字是：{{pname}}</p><button @click="change_child_name">切换子组件名字</button></div>'
})

//父组件定义
var vm = new Vue({  
    el: '#app', 
    components: {
        child: child,
    },
    data: {
        parent_name: '1111'
    },  
    methods: {  
        change_parent_name: function () {
            this.parent_name = '2222'
        }
    }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">  
    <p>父组件名字：{{parent_name}}</p>
    <button @click="change_parent_name">切换父组件名字</button>
    <child ref="child" :pname="parent_name"></child>
</div>