Vue父子组件的相互调用方法与参数
父组件调用子组件的方法
方法一:$children,根据下标获取子组件(不推荐)
<!--父组件模板--> <div id="app"> <cpn></cpn> <cpn2></cpn2> <button @click="btn">点击</button> </div> <!--子组件模板--> <template id="cpn"> <div>cpn子组件</div> </template> <template id="cpn2"> <div>cpn2子组件</div> </template>
使用$children获取子组件的方法与属性
const cpn = { template: "#cpn", methods:{ cpnBtn() { console.log("这个是cpn的cpnBtn方法"); } } }; const cpn2 = { template: "#cpn2", methods:{ cpn2Btn() { console.log("cpn2的cpn2Btn方法"); } } }; const vue = new Vue({ el:"#app", data() { return { name:"lhs" }; }, methods:{ btn() { //父组件模板里,获取第一个子组件(cpn)的方法 this.$children[0].cpnBtn(); //父组件模板里,获取第二个子组件(cpn2)的方法 this.$children[1].cpn2Btn() } }, components:{ cpn, cpn2 } })
$children之所以不推荐使用,父组件模板里的子组件调换顺序,$children下标的顺序也要换,复用性不强
<!--父组件模板--> <div id="app"> <cpn2></cpn2> <cpn></cpn> <button @click="btn">点击</button> </div> //父组件模板里,获取第2个子组件(cpn)的方法 this.$children[1].cpnBtn(); //父组件模板里,获取第1个子组件(cpn2)的方法 this.$children[0].cpn2Btn()
方法二:$refs(推荐)
简单起见,v-el
和 v-ref
合并为一个 ref
attribute ,可以在组件实例中通过 $refs
来调用。这意味着 v-el:my-element
将写成这样:ref="myElement"
,v-ref:my-component
变成了这样:ref="myComponent"
。绑定在一般元素上时,ref
指 DOM 元素,绑定在组件上时,ref
为一组件实例。
<!--父组件模板--> <div id="app"> <cpn2></cpn2> <!--通过ref获取到整个组件(component)的对象。--> <cpn ref="cpa"></cpn> <button @click="btn">点击</button> </div>
const vue = new Vue({ el:"#app", data() { return { name:"lhs" }; }, methods:{ btn() { //不需下标,根据ref定位 this.$refs.cpa.cpnBtn(); } }, components:{ cpn, cpn2 } })
子组件调用父组件的方法
方法一:$parent,返回上一层调用组件
<!--父组件模板--> <div id="app"> <cpn></cpn> </div> <!--子组件模板--> <template id="cpn"> <div> <h3>cpn子组件</h3> <button @click="cpnBtn">点击</button> </div> </template>
const vue = new Vue({ el:"#app", data() { return { name:"lhs" }; }, methods:{ btn() { console.log("父组件的btn方法"); } }, components:{ cpn:{ template: "#cpn", methods:{ cpnBtn() { //返回上一层调用组件,如果子组件(cpn)在嵌套子组件(cpn2),当前(cpn2)就会调用cpn而不是调用根父组件 this.$parent.btn(); } } } } })
方法二:$root,调用根父组件
const vue = new Vue({ el:"#app", data() { return { name:"lhs" }; }, methods:{ btn() { console.log("父组件的btn方法"); } }, components:{ cpn:{ template: "#cpn", methods:{ cpnBtn() { //当前子组件就算嵌套,也会调用根父组件 this.$root.btn(); } } } } })