Vue父子组件之间通信

﹏ヽ暗。殇╰゛Y 2022-03-22 03:42 271阅读 0赞

1.子组件代码

<template>
      <Editor id="tinymce" :init="editorInit" v-model="message"/>
    </template>
    <script>
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/modern/theme'
    import Editor from '@tinymce/tinymce-vue'
    export default {
      name: 'Tinymce',
      components: { Editor },
      props: {
        message: {
          type: String,
          default: ''
        }
      },
      data() {
        return this.initFields()
      },
      mounted() {
        tinymce.init({})
      },
      methods: {
        initFields() {
          const fields = {
            editorInit: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300 }
          }
          return fields
        }
      }
    }
    </script>

2.父组件代码：

<template>
        <Editor id="tinymce" ref="childConponent" message="notice.content" />
    </template>
    <script>
    import Editor from '@/components/Tinymce/index'
    export default {
      directives: {
        waves
      },
      components: { Editor }
      }
    }
    </script>

3.解析：

父组件通过属性传值

![20190125173237853.png][]

该属性与子组件的

props: {
        message: {
          type: String,
          default: ''
        }
      }

相对应

props 中定义的属性，与data()中定义的属性用法一样

[20190125173237853.png]: /images/20220322/a4ecc42d274b409c9f7ea6e1c8d515e5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue父子组件通信

vue 父子组件通信 1.1 父传子 props（组件通信） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

我会带着你远行/ 2023年01月15日 03:57/ 0 赞/ 114 阅读

相关 vue父子兄弟之间的组件通信

vue组件通信的方式父子组件通信 > 父组件：father.vue <template> <div class="father">

￡神魔★判官ぃ/ 2023年01月01日 12:59/ 0 赞/ 173 阅读

相关 vue中父子组件之间通信的方法

<template> <div> <div>father组件

川长思鸟来/ 2022年12月27日 04:54/ 0 赞/ 140 阅读

相关 Vue---父子组件通信+子父组件通信+非父子组件通信

父-子组件通信-props 父组件到子组件通信，通过props。子组件在props中定义要传的值，props有两种形式，一种是字符串数组形式，一种是对象形式。前者方

柔情只为你懂/ 2022年11月30日 04:13/ 0 赞/ 255 阅读

相关 vue非父子组件之间的通信

1、创建一个vm.js文件 --保证通信组件是一个vue对象 ![70][] 2、vm.js的内容 / Created by Adminis

喜欢ヅ旅行/ 2022年05月28日 12:55/ 0 赞/ 224 阅读

相关 vue父子组件之间通信实例

一、父组件向子组件传递数据 ①获取数据并在父组件上绑定数据 ②在子组件使用props接收父组件传递过来数据 ③将接收的数据绑定到子组件模板二、子组件向父组件传递

待我称王封你为后i/ 2022年04月21日 21:06/ 0 赞/ 220 阅读

相关 Vue父子组件之间通信

1.子组件代码 <template> <Editor id="tinymce" :init="editorInit" v-model="message"/

﹏ヽ暗。殇╰゛Y/ 2022年03月22日 03:42/ 0 赞/ 272 阅读

相关 vue父子组件之间的通信

在vue组件通信中其中最常见通信方式就是父子组件之中的通性，而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用

绝地灬酷狼/ 2022年03月06日 02:12/ 0 赞/ 262 阅读

相关 vue 父子组件通信

vue 父子组件通信，如下图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

快来打我*/ 2022年01月25日 19:19/ 0 赞/ 392 阅读

相关 Vue非父子组件之间的通信

// 注册一个空的js,作为中转站 bus.js import Vue from 'vue' export default new Vue() A组件：

亦凉/ 2022年01月23日 21:23/ 0 赞/ 273 阅读