vue.js中父组件触发子组件中的方法

知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性

(1)子组件

 child_crud.js

var html_child_crud=
"<div>\n" +
。。。子组件页面内容
    "</div>";
var child_crud= Vue.component('child_crud', {
template:html_child_crud ,
data : function(){
return {
name:"子组件"
        }
},
methods: {
//子组件中的方法
query:function(){

}
},
});
(2)父组件:
<script type="text/javascript" src="../child_crud.js"></script>
<div id="myvue">
  <template>
<child_crud ref="childComponent"></child_crud>
</template>
</div>
<script>
var myvue = new Vue({
el: '#myvue',
data:function() {
return {

};
},
methods: {
invokeChildmethod:function(){
//父类通过ref="face_device_log"给子类起的名字face_device_log,调用子类中的方法
this.$refs.childComponent.query();
//调用子类中属性,更改子类中属性
this.$refs.childComponent.name='parent';
}
}
})
</script>
 
posted @ 2019-05-15 14:17  shuaiflying  阅读(3952)  评论(0编辑  收藏  举报