vuejs--ref父子组件的使用

ref与emit作用相类似，不使用HTML的形式，在webpack的环境下进行，按照书写路由，视图的形式，写父文件和子文件。

首先，父文件仍然在视图文件夹下，创建一个父组件：（src/views/Ref.vue）

<code class="language-html">&lt;template&gt;
&lt;div class="hello"&gt;
&lt;p&gt;本页面是parent页面, 会引用 ChildRef &lt;/p&gt;
&lt;input type='button' @click='get_child_value' value="获取child中变量的值"/&gt; :
value_in_parent:    {<!-- -->{value_in_parent}}  
&lt;br/&gt;
&lt;ChildRef ref="child"&gt;&lt;/ChildRef&gt;    
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import ChildRef from '@/components/ChildRef'
export default {
data () {
return {
value_in_parent: '',
}
}, 
mounted(){
},
components: {
ChildRef
},
methods: {
get_child_value(){
this.value_in_parent = this.$refs.child.value_in_child
}
}
}
&lt;/script&gt;

然后我们继续创建上面的父组件应用的src/components/ChildRef.vue文件，内容如下

<code class="language-html">&lt;template&gt;
&lt;div style='border: 1px solid red; margin-left: 50px; width: 600px'&gt;
本页面是child: &lt;br/&gt;
value_in_child: &lt;input type="text" v-model="value_in_child"/&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
data () {
return {
value_in_child: ""
}
},
}
&lt;/script&gt;

接着修改路由文件，增加ref路由

刷新页面即可看到页面如下

 可见效果与emit类似