Vue父组件访问子组件属性和方法、父子组件双向绑定（两种方法）

1. 使用vue-cli创建项目

目录结构如下图:

2. 编写代码

src/components/HelloWorld.vue

<template><div class="hello"><h3>{{ msg }}</h3>子组件绑定了vue的属性:<input type="text" v-model="text"> <br />使用子传父,父传子的方式绑定:<input type="text" :value="val" @input="handleVal"></div>
</template><script>
import { mapState } from 'vuex';export default {name: "HelloWorld",// 子组件接收自定义属性值props: {msg: {type: String},val: {type: String}},// 子组件的属性data: function () {return {name: '张三(法外狂徒)',}},methods: {// 子组件的方法say() {return '大哥流啤(歇斯底里+破音)!!!!!!!';},// 触发自定义父组件事件handleVal(e) {this.$emit('input', e.target.value);}},// 子组件接收computed: {...mapState(['text']),}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

src/router.index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";Vue.use(VueRouter);const routes = [{path: "/",name: "Home",component: Home,},
];const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes,
});export default router;

src/store/index.js

import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({state: {text: "",},mutations: {// 修改storesetText(state, val) {state.text = val;},},actions: {},modules: {},
});

src/views/Home.vue

<template><div class="home"><HelloWorld msg="我是子组件" ref="child" :value="val" @input="handleVal" /><hr /><h3>{{msg}}</h3><button @click="getAttr">父组件访问子组件属性</button><button @click="getMeth">父组件调用子组件方法</button> <br/>父组件绑定了vuex的属性:<input type="text" @input="setText" v-model="text"> <br/>使用子传父,父传子的方式绑定:<input type="text" :value="val"><h1>{{receiveText}}</h1></div>
</template><script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";export default {name: "Home",data: function () {return {msg: '我是父组件',receiveText:'',text:'',val:''}},methods:{// 父组件访问子组件属性getAttr(){this.receiveText=this.$refs.child.name;},// 父组件调用子组件方法getMeth(){this.receiveText=this.$refs.child.say();},// 父组件修改storesetText(){this.$store.commit('setText',this.text);},handleVal(val){this.val=val;}},components: {HelloWorld,},
};
</script>

3. 演示GIF图

Vue父组件访问子组件属性和方法、父子组件双向绑定（两种方法）相关推荐

vue项目中 img标签加载失败方法，onerror事件的两种方法
vue项目中 img标签加载失败方法 ?css 第一种方法第二种方法本人写的第一篇文章,希望对你有帮助第一种方法 < img src="123" :οnerrοr=&q ...
AIX更改逻辑卷属性的两种方法（smit和命令行）
起因:mklv 时忘记指定-t 参数导致TYPE默认为RAW(应该是raw), p550a:/dev#lslv data40_disk LOGICAL VOLUME: data40_disk ...
vue 父链和子组件索引_vuejs填坑-父子组件之间的访问
有时候我们需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 1. 父组件访问子组件 $children或$ref $children 返回所有子组件的实例,是一个数组显示两个组件的信 ...
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
文章目录一.案例概述二.代码准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
vue父页面调用子页面及方法及传参，鼠标光标定位
项目场景: vue父页面调用子页面及方法问题描述 vue中父界面调用子界面及方法时界面可以调用,但是调用方法的时候第一次报错,但是关掉界面再次重新打开就没问题了原因分析: 在我之前添加鼠标指针定位 ...
【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
19、angular1之pass-word组件、input-select组件、only-select组件（两种）、on-off组件、layui中的datetime示例、京东购物车、两种作用域绑定、
19.angular1之pass-word组件.input-select组件 .only-select组件(两种).on-off组件.layui中的datetime示例.京东购物车.两种作用域绑定.两 ...
组件Refs(操作DOM的2⃣️两种方法)
组件Refs(操作DOM的2⃣️两种方法) 第一种方式 var mySubmitButton = document.getElementById('submitButton'); console.lo ...
Unity 得到游戏组件的常用的两种方法
看了一些别人总结的得到组件的方法,很详细,但是初学者会看得眼花缭乱(我就是),这里给出最常用的得到游戏组件的两种方法.这里都以MeshRenderer 组件为例 1.当脚本挂在当前游戏物体,需要得到当 ...

Vue父组件访问子组件属性和方法、父子组件双向绑定（两种方法）

Vue父组件访问子组件属性和方法、父子组件双向绑定（两种方法）

1. 使用vue-cli创建项目

2. 编写代码

3. 演示GIF图

Vue父组件访问子组件属性和方法、父子组件双向绑定（两种方法）相关推荐

最新文章

热门文章