{"id":23541,"date":"2024-03-16T01:34:21","date_gmt":"2024-03-16T01:34:21","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/"},"modified":"2024-03-22T01:31:13","modified_gmt":"2024-03-22T01:31:13","slug":"how-to-modify-the-value-of-the-parent-component-with-a-jetpack","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/","title":{"rendered":"How to modify the value of the parent component with a jetpack?"},"content":{"rendered":"

To modify the value of the parent component, you can achieve this through props and events.<\/p>\n

    \n
  1. Using props to pass data: in the parent component, pass the value that needs to be modified as props to the child component. The child component can directly access the value in the parent component through props, and can modify this value. When the child component modifies this value, the corresponding data in the parent component will also be modified.<\/li>\n<\/ol>\n
    \/\/ \u7236\u7ec4\u4ef6<\/span>\r\n<template>\r\n  <div<\/span>><\/span>\r\n    <ChildComponent<\/span> :value<\/span>=\"parentValue\"<\/span> @updateValue<\/span>=\"updateValue\"<\/span> \/><\/span>\r\n    <p<\/span>><\/span>\u7236\u7ec4\u4ef6\u7684\u503c: {{ parentValue }}<\/p<\/span>><\/span>\r\n  <\/div<\/span>><\/span><\/span>\r\n<\/template>\r\n<script<\/span>><\/span>\r\n  import<\/span> ChildComponent<\/span> from<\/span> '.\/ChildComponent.vue'<\/span>;\r\n\r\n  export<\/span> default<\/span> {\r\n    data<\/span>(<\/span>) {\r\n      return<\/span> {\r\n        parentValue<\/span>: '\u521d\u59cb\u503c'<\/span>,\r\n      };\r\n    },\r\n    methods<\/span>: {\r\n      updateValue<\/span>(newValue<\/span>) {\r\n        this<\/span>.parentValue<\/span> = newValue;\r\n      },\r\n    },\r\n    components<\/span>: {\r\n      ChildComponent<\/span>,\r\n    },\r\n  };\r\n<\/span><\/script<\/span>><\/span><\/span>\r\n\r\n\/\/ \u5b50\u7ec4\u4ef6<\/span>\r\n<template<\/span>><\/span>\r\n  <div<\/span>><\/span>\r\n    <input<\/span> v-model<\/span>=\"value\"<\/span> @input<\/span>=\"updateParentValue\"<\/span> \/><\/span>\r\n    <p<\/span>><\/span>\u5b50\u7ec4\u4ef6\u7684\u503c: {{ value }}<\/p<\/span>><\/span>\r\n  <\/div<\/span>><\/span>\r\n<\/template<\/span>><\/span><\/span>\r\n<script<\/span>><\/span>\r\n  export<\/span> default<\/span> {\r\n    props<\/span>: {\r\n      value<\/span>: String<\/span>,\r\n    },\r\n    methods<\/span>: {\r\n      updateParentValue<\/span>(<\/span>) {\r\n        this<\/span>.$emit('updateValue'<\/span>, this<\/span>.value<\/span>);\r\n      },\r\n    },\r\n  };\r\n<\/span><\/script<\/span>><\/span><\/span>\r\n<\/code><\/pre>\n
      \n
    1. Usage of events: Define a method in the parent component to modify the value of the parent component, and pass this method to the child component through an event. The child component can then call this method to modify the value of the parent component.<\/li>\n<\/ol>\n
      \/\/ \u7236\u7ec4\u4ef6<\/span>\r\n<template>\r\n  <div<\/span>><\/span>\r\n    <ChildComponent<\/span> @updateValue<\/span>=\"updateValue\"<\/span> \/><\/span>\r\n    <p<\/span>><\/span>\u7236\u7ec4\u4ef6\u7684\u503c: {{ parentValue }}<\/p<\/span>><\/span>\r\n  <\/div<\/span>><\/span><\/span>\r\n<\/template>\r\n<script<\/span>><\/span>\r\n  import<\/span> ChildComponent<\/span> from<\/span> '.\/ChildComponent.vue'<\/span>;\r\n\r\n  export<\/span> default<\/span> {\r\n    data<\/span>(<\/span>) {\r\n      return<\/span> {\r\n        parentValue<\/span>: '\u521d\u59cb\u503c'<\/span>,\r\n      };\r\n    },\r\n    methods<\/span>: {\r\n      updateValue<\/span>(newValue<\/span>) {\r\n        this<\/span>.parentValue<\/span> = newValue;\r\n      },\r\n    },\r\n    components<\/span>: {\r\n      ChildComponent<\/span>,\r\n    },\r\n  };\r\n<\/span><\/script<\/span>><\/span><\/span>\r\n\r\n\/\/ \u5b50\u7ec4\u4ef6<\/span>\r\n<template<\/span>><\/span>\r\n  <div<\/span>><\/span>\r\n    <button<\/span> @click<\/span>=\"updateParentValue\"<\/span>><\/span>\u66f4\u65b0\u7236\u7ec4\u4ef6\u7684\u503c<\/button<\/span>><\/span>\r\n  <\/div<\/span>><\/span>\r\n<\/template<\/span>><\/span><\/span>\r\n<script<\/span>><\/span>\r\n  export<\/span> default<\/span> {\r\n    methods<\/span>: {\r\n      updateParentValue<\/span>(<\/span>) {\r\n        this<\/span>.$emit('updateValue'<\/span>, '\u65b0\u7684\u503c'<\/span>);\r\n      },\r\n    },\r\n  };\r\n<\/span><\/script<\/span>><\/span><\/span>\r\n<\/code><\/pre>\n
      The above examples demonstrate two methods to modify the value of the parent component. You can choose one of them based on your actual situation to implement.<\/p>\n","protected":false},"excerpt":{"rendered":"
      To modify the value of the parent component, you can achieve this through props and events. Using props to pass data: in the parent component, pass the value that needs to be modified as props to the child component. The child component can directly access the value in the parent component through props, and can […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-23541","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow to modify the value of the parent component with a jetpack? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to modify the value of the parent component with a jetpack?\" \/>\n<meta property=\"og:description\" content=\"To modify the value of the parent component, you can achieve this through props and events. Using props to pass data: in the parent component, pass the value that needs to be modified as props to the child component. The child component can directly access the value in the parent component through props, and can […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T01:34:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T01:31:13+00:00\" \/>\n<meta name=\"author\" content=\"Emily Johnson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emily Johnson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/\"},\"author\":{\"name\":\"Emily Johnson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378\"},\"headline\":\"How to modify the value of the parent component with a jetpack?\",\"datePublished\":\"2024-03-16T01:34:21+00:00\",\"dateModified\":\"2024-03-22T01:31:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/\"},\"wordCount\":160,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/\",\"name\":\"How to modify the value of the parent component with a jetpack? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T01:34:21+00:00\",\"dateModified\":\"2024-03-22T01:31:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to modify the value of the parent component with a jetpack?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378\",\"name\":\"Emily Johnson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g\",\"caption\":\"Emily Johnson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/emilyjohnson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to modify the value of the parent component with a jetpack? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/","og_locale":"en_US","og_type":"article","og_title":"How to modify the value of the parent component with a jetpack?","og_description":"To modify the value of the parent component, you can achieve this through props and events. Using props to pass data: in the parent component, pass the value that needs to be modified as props to the child component. The child component can directly access the value in the parent component through props, and can […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T01:34:21+00:00","article_modified_time":"2024-03-22T01:31:13+00:00","author":"Emily Johnson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Emily Johnson","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/"},"author":{"name":"Emily Johnson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378"},"headline":"How to modify the value of the parent component with a jetpack?","datePublished":"2024-03-16T01:34:21+00:00","dateModified":"2024-03-22T01:31:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/"},"wordCount":160,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/","name":"How to modify the value of the parent component with a jetpack? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T01:34:21+00:00","dateModified":"2024-03-22T01:31:13+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-modify-the-value-of-the-parent-component-with-a-jetpack\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to modify the value of the parent component with a jetpack?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3b041b19cffc258705478ecfab895378","name":"Emily Johnson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a5cb4e73d02ab1d79f2dfe919389ff7c1de072baa97686392031c03d858cc358?s=96&d=mm&r=g","caption":"Emily Johnson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/emilyjohnson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/23541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=23541"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/23541\/revisions"}],"predecessor-version":[{"id":57524,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/23541\/revisions\/57524"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=23541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=23541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=23541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}