値を渡すquickapp_quick application_parent-childコンポーネント

ページレベルのコンポーネント

pagesで定義されたコンポーネントは、ページレベル コンポーネント と呼ばれます。

ページレベルのコンポーネント (Vue ページに相当)、ルーティング設定を通じてページジャンプを実行できます。

カスタムコンポーネント（サブコンポーネント）

で定義されたコンポーネントはcomponentsカスタム コンポーネントと呼ばれます。

カスタム コンポーネント (Vue のサブコンポーネントに相当) は、最も使用される部分をカプセル化し、複数回使用できます。

カスタムコンポーネント(サブコンポーネント)の導入

例えば

親コンポーネントが子コンポーネントに値を渡す

親コンポーネントはpropsを使用して子コンポーネントに値を渡します。その構文は V​​ue の props 値パスに似ています。値の型やデフォルト値などを指定でき、データ検証も実行できます。

違い: 親コンポーネントは、子コンポーネントに値を渡すときにダッシュ区切りの名前を使用し、子コンポーネントで props を受け取るときにキャメルケースの名前を使用します。

検証を行う場合、検証順序は必須項目チェック→型チェック→機能チェックとなります。

文法

• 親コンポーネント

    <!-- 如果属性名是多个单词 使用短横线分割命名 -->
    <son 属性名=属性值></son>
  

• サブアセンブリ

  props: [] // 仅类型检查
  

  props:{
        
        
    属性名:{
        
        
      type: String/Number... // 类型检查
      required: true/false // 是否必填
      default:  // 默认值
      validator: function(value){
        
        
        return true/false // 检查是否符合要求
      }
    }
  }
  

例: 親コンポーネントは 3 つのパラメータを受け取ります: 名前 (文字列タイプで渡す必要があります)、年齢 (数値タイプ、3 つの数字 18、19、および 29 のいずれか 1 つだけを受け入れます)、アドレス (文字列タイプ、18 文字を超えることはできません) 、デフォルトは中国）ページに表示されます

• 親コンポーネント

  <import name="son" src="../../components/Detail"></import>
  <template>
    <div class="wrapper">
      <son per-name='{
        
        {name}}' per-age='{
        
        {age}}'></son>
    </div>
  </template>
  
  <script>
  export default {
        
        
    public:{
        
        
      name: 'chaochao',
      age: 18
    }
  }
  </script>
  

• サブアセンブリ

  <template>
    <div class="wrapper">
      <text>{
        
        {
        
         perName }}</text>
      <text>{
        
        {
        
         perAge }}</text>
      <text>{
        
        {
        
         perArea }}</text>
    </div>
  </template>
  
  <script>
  export default {
        
        
    props:{
        
        
      perName:{
        
        
        type: String,
        required: true
      },
      perAge:{
        
        
        type: Number,
        validator: function(value){
        
        
          return [18, 19, 29].includes(value)
        }
      },
      perArea:{
        
        
        type: String,
        default: '中国',
        validator: function(value){
        
        
          return value.length < 18
        }
      }
    }
  }
  </script>
  

• 結果を示す
  

サブコンポーネントが親コンポーネントに値を渡す

親から子コンポーネントに渡される値は一方向のデータ フローです。つまり、子コンポーネントは親コンポーネントから渡された値の参照を直接変更できません。

文法

// 子组件
this.$dispatch('子组件触发事件名',值)
// 父组件
onInit(){
    
    
  this.$on('子组件触发事件名',触发的父方法方法)
}

// 子组件
this.$emit(方法名，值)
// 父组件
<son on方法名=‘父组件方法’></son>

例: 親コンポーネントから渡された name 属性を子コンポーネントで変更する

• 方法1

  • 子コンポーネント: 親コンポーネントのカスタム イベントをトリガーします。

    editname(){
            
            
      this.$dispatch('dispatchEvt',{
            
            
        name:'niuniu'
      })
    }
    

  • サブコンポーネント: カスタム イベント トリガーをリッスンする

    onInit(){
            
            
      this.$on('dispatchEvt',this.editName)
    },
    editName(value){
            
            
      console.log(value)
    }
    

    出力結果は次のとおりです。
    
    したがって、次の方法で値を割り当てることができます。

    editName(value){
            
            
     this.name = value.detail.name
    }
    

• 方法 2

  • サブアセンブリ

    editname(){
            
            
      this.$emit('editName',{
            
            
        name:'niuniu'
      })
    }
    

  • 親コンポーネント

    <son p-name="{
            
            {name}}" p-age="{
            
            {age}}" onedit-name='editname'></son>
    

    editname(value){
            
            
      console.log(value)
    }
    

    出力結果は次のとおりです。
    
    したがって、次の方法で値を割り当てることができます。

    editName(value){
            
            
     this.name = value.detail.name
    }
    

ヒント: 転送が完了したら、 value. を呼び出してstop()転送を終了できます。それ以外の場合は、転送が継続されます。

親コンポーネントが子コンポーネントのメソッドを呼び出す

<son id='xxx'></son>

const ele = this.$child('子组件id名') // 获取子组件
ele.方法名() //  方法调用