ref 和 $refs 父子组件方法调用 vue项目打包（2018/12/4）

时间 2020-06-04

标签 ref refs 父子组件方法调用 vue 项目打包繁體版

原文原文链接

1、ref 和 $refs 的使用

ref

ref 用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。若是在普通DOM元素上使用，引用指向的就是DOM元素；若是用在子组件上，引用就指向组件实例。

$refs

通常来说，获取DOM元素，需document.querySelector（".text"）获取这个dom节点，而后在获取text的值。可是用ref绑定以后，咱们就不须要在获取dom节点了，直接在上面的input上绑定text，而后$refs里面调用就行。而后在javascript里面这样调用：this.$refs.text 这样就能够减小获取dom节点的消耗了

2、父子组件的方法调用

父组件调用子组件的方法先用ref=“xxx”在子组件进行注册而后用 this.$refs.xxx.方法（）进行调用

子组件调用父组件的方法 this.$parents.方法（）

<body>

<button @click="text">调用子组件的方法</button>

</div>

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>

3、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文件夹将这个文件夹复制以后上传到服务器便可