关于vue.js:vue子组件向父组件传值

1.开发环境 vuecli3
2.电脑系统 windows10专业版
3.在应用 vue开发的过后中,咱们常常会遇到组件传值的问题,上面我来分享一下vue中子组件向父组件传值的办法,心愿对你有所帮忙。
4.废话不多说,间接上代码:

//父组件代码:<template>  <div>    <p>我是父组件</p>    <Chenperson1 :method="parentMethod"></Chenperson1>  </div></template><script>import Chenperson1 from "@/components/Chenperson1.vue";export default {  name: "ChenPerson",  components: {    Chenperson1,  },  data() {    return {};  },  mounted() {},  methods: {    parentMethod(valueFromChild) {      console.log('From the child:', valueFromChild);    },  },};</script><style></style>

//子组件代码:<template>  <div>    <p>我是子组件一</p>  </div></template><script>export default {  name: "Chenperson1",  props: {    method: { type: Function },  },  data() {    return {      chenvalue:"I am the child",    };  },  mounted() {    this.method(this.chenvalue);  },  methods: {   ggg(){       }  },};</script><style></style>

成果如下:

5.尽管下面的办法解决了子组件向父组件传值的问题,只是这不是在Vue中的最佳形式。相同,事件更适宜解决这个问题。咱们能够应用事件来实现完全相同的事件。

// 父组件代码:<template>  <div>    <p>我是父组件</p>    <Chenperson1 @send-message="handleSendMessage"></Chenperson1>    <button @click="gochild">去子组件一</button>  </div></template><script>import Chenperson1 from "@/components/Chenperson1.vue";export default {  name: "ChenPerson",  components: {    Chenperson1,  },  data() {    return {};  },  mounted() {},  methods: {     handleSendMessage(event, value) {      console.log('From the child:', event);    },    gochild() {      this.$router.push({ name: "chenperson1" });    },  },};</script><style></style>

// 子组件代码:<template>  <div>    <p>我是子组件一</p>  </div></template><script>export default {  name: "Chenperson1",  props: {    method: { type: Function },  },  data() {    return {      chenvalue:"I am the child",    };  },  mounted() {    this.$emit('send-message', this.chenvalue);  },  methods: {   ggg(){       }  },};</script><style></style>

成果如下:

6.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。