ref 和 $refs 父子组件方法调用 vue项目打包（2018/12/4）
一、ref 和 $refs 的使用
ref
ref 用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。
$refs
一般来讲，获取DOM元素，需document.querySelector（".text"）获取这个dom节点，然后在获取text的值。 但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定text，然后$refs里面调用就行。 然后在javascript里面这样调用：this.$refs.text 这样就可以减少获取dom节点的消耗了
二、父子组件的方法调用
父组件调用子组件的方法 先用ref=“xxx”在子组件进行注册 然后用 this.$refs.xxx.方法（）进行调用
子组件调用父组件的方法 this.$parents.方法（）
<body>
<div id="box">
<button @click="text">调用子组件的方法</button>
<com ref="child" ><span slot="left">搜索</span></com>
</div>
<script type="text/javascript">
var com ={ //子组件
template:`<div @click="chi"><slot name="left"></slot>这是子组件</div>`, //子组件的事件要写在模板里
methods:{
fun(){
alert("这是子组件的方法")
},
chi(){ //子组件调用父组件的方法
this.$parents.one()
}
}
}
new Vue({ //父组件
el:"#box",
components:{
com
},
methods:{
one(){
console.log("这是父组件的方法")
},
text(){ //在父组件的方法中利用this.$refs调用
this.$refs.child.fun()
}
}
})
</script>
</body>
三、vue项目打包
在文件目录下的/config/index.js中找到build 进行下面的操作
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //这个路径原本是“/” 现在将其改为“./”
执行这个操作后会生成一个dist文件夹 将这个文件夹复制之后上传到服务器即可
