이 기사는 Vue에서 일반적으로 사용되는 세 가지 가치 전송 방법을 공유합니다. 필요한 참조 가치가 있습니다.
상위 구성 요소가 하위 구성 요소에 값을 전달합니다.
상위 구성 요소:
<template> <p> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputName="name"></child> </p> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } } } </script>
하위 구성 요소:
<template> <p> 子组件: <span>{{inputName}}</span> </p> </template> <script> export default { // 接受父组件的值 props: { inputName: String, required: true } } </script>
2 하위 구성 요소가 상위 구성 요소에 값을 전달합니다.
하위 구성 요소:
<template> <p> 子组件: <span>{{childValue}}</span> <!-- 定义一个子组件传值的方法 --> <input type="button" value="点击触发" @click="childClick"> </p> </template> <script> export default { data () { return { childValue: '我是子组件的数据' } }, methods: { childClick () { // childByValue是在父组件on监听的方法 // 第二个参数this.childValue是需要传的值 this.$emit('childByValue', this.childValue) } } } </script>
상위 구성 요소:
<template> <p> 父组件: <span>{{name}}</span> <br> <br> <!-- 引入子组件 定义一个on的方法监听子组件的状态--> <child v-on:childByValue="childByValue"></child> </p> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } }, methods: { childByValue: function (childValue) { // childValue就是子组件传过来的值 this.name = childValue } } } </script>
3. 부모-자식이 아닌 구성 요소는 값을 전달합니다. (부모가 아닌 컴포넌트와 자식 컴포넌트 사이에 값을 전송하려면 퍼블릭 퍼블릭 인스턴스 파일인bus.js를 값을 전송할 중간 웨어하우스로 정의해야 합니다. 그렇지 않으면 라우팅 컴포넌트 간의 값 전송 효과가 달성되지 않습니다.)
Publicbus.js
//bus.js import Vue from 'vue' export default new Vue()
컴포넌트 A:
<template> <p> A组件: <span>{{elementValue}}</span> <input type="button" value="点击触发" @click="elementByValue"> </p> </template> <script> // 引入公共的bug,来做为中间传达的工具 import Bus from './bus.js' export default { data () { return { elementValue: 4 } }, methods: { elementByValue: function () { Bus.$emit('val', this.elementValue) } } } </script> 组件B: <template> <p> B组件: <input type="button" value="点击触发" @click="getData"> <span>{{name}}</span> </p> </template> <script> import Bus from './bus.js' export default { data () { return { name: 0 } }, mounted: function () { var vm = this // 用$on事件来接收参数 Bus.$on('val', (data) => { console.log(data) vm.name = data }) }, methods: { getData: function () { this.name++ } } } </script>
관련 권장 사항:
Vue 사용자 정의 명령어 및 명령어 정의 함수(코드)에 대한 자세한 분석
위 내용은 Vue에서 일반적으로 사용되는 세 가지 값 전송 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!