Vue组件子传父参数的方法总结 ,兄弟组件传参方法,emit /update / .sync用法
1- $emit在子组件中,给input添加了bind,并调用一个method:getValue<div class="register"><input id="register-ipt" type="text" placeholder="请输入您的手机号" @input="getValue"><router-link to="/register" tag...
·
1- $emit
在子组件中,给input添加了bind,并调用一个method:getValue
<div class="register">
<input id="register-ipt" type="text" placeholder="请输入您的手机号" @input="getValue">
<router-link to="/register" tag="button">注册</router-link>
<span>已有账号?<router-link to='/login'>登录</router-link></span>
</div>
在子组件的js部分,
data() {
return {
numMessage:{
ipt_value:'',
state:false
}
};
},
methods:{
getValue(){
//getValue监听了input的输入事件。每次输入的时候都向父组件进行传参
let ipt_value = document.getElementById('register-ipt').value
this.numMessage.ipt_value = ipt_value
this.$emit('getNumber',this.numMessage)
//通过$emit发送数据(参数一:父组件中接收参数的v-on名字,参数二:子组件中要发送的数据)
}
},
父组件部分的代码
这里我用的是一个路由跳转。你可以按需更换tag类型
<router-view @getNumber="showNum" :message="message"> </router-view>
methods:{
showNum(obj){
//这里的obj就是从子组件传来的对象。
//注意。这里的方法名字 跟html中v-on绑定的方法名字一致
this.message.num = obj.ipt_value
this.message.state = obj.state
}
}
2- .sync , $emit 和update配合的具体用法
主要用于父子组件的数据双向绑定。
ps. 可以去掉注释,复制到编译器里自己试一下
父组件中的代码如下
`template部分`
<template>
<div>
<child :name.sync="name"></child>
`这里用了子组件`;
`v-bind后的名字name和双引号中的name必须一直,否则无法实现监听`
<button @click="alertName">点击</button>
<button @click="changeName">改变</button>
</div>
</template>
`JavaScript部分`
<script>
import child from "./Child"; `引入子组件`
export default {
components: {
child
},
data() {
return {
name: "xiaoming" ,
`父组件在这里定义了name的初始值,并且通过上面的:name.sync="name"把父组件中name的值传到子组件中`
};
},
methods: {
alertName() {
alert(this.name);
`alert父组件中的name值`
console.log("这里是父组件 : " + this.name);
},
changeName() {
this.name = "123";
`改变父组件中的name值`
}
}
};
</script>
子组件的代码如下:
<template>
<div>
<input :value="name" @input="handleInput" type="text" />
`:value="name" 设置了输入框的value值`
</div>
</template>
<script>
export default {
props: {
`这里接收了父组件传来的值name,并设置为字符串 / 必须传的条件`
name: {
type: String,
required: true
}
},
methods: {
handleInput(e) {
`这里监听了input的输入事件`
console.log(e.target.value);
`你可以尝试在input中输入字符,看看控制台的变化`
this.$emit("update:name", e.target.value);
`这里把input中输入的value传给了父组件,并赋值给name`
`因此,你在input中输入新的内容后,父组件中alert的内容才会跟着变化`
}
}
};
</script>
$parent
用来从一个子组件访问父组件的实例
可以代替将数据以 prop 的方式传入子组件的方式
provide & inject
在父组件中通过provide注入一些属性 / 方法 ,在子组件,孙子组件,曾孙子组件中都可以使用
更多推荐
已为社区贡献2条内容
所有评论(0)