Как совместить две составляющие - PullRequest
Новая
       6

Как совместить две составляющие

0 голосов
/ 04 сентября 2018

У меня есть один компонент для кнопки и один для HTML. Мне нужно получить ответ от кнопки в компоненте HTML, где у меня есть v-if условие. Если кнопка нажата true, добавьте HTML. 

 <template>

    <button v-on:click="greet">Greet</button>

</template>

    <script>
        export default {

            data () {
                return {
                    toggle: false,
                }
            },

            mounted() {
                console.log('Add more componente mounted.')
            }
        }
    </script>

HTML-компонент: 

<template>

        <div v-show='toggle' class="bg-white">
            <div class="row">
                <div class="col-md-5">
                    <h1>Title</h1>
                    ....
                    .....
                </div>
            </div>
        </div>

</template>

    <script>
        export default {

            data () {
                return {
                    toggle: true
                }
            },

            mounted() {
                console.log('Add more componente mounted.')
            }
        }
    </script>

Как получить / передать и использовать ответ кнопки в html-компоненте, toggle: false,

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

вы можете обмениваться данными между родительским компонентом и дочерним компонентом, используя props для отправки данных от родителя к потомку и событие this.$emit для отправки данных от дочернего к родителю.

дочерний компонент кнопки 

<template>
        <button v-on:click="greet">Greet</button>
 </template>
 <script>
            export default {
                props:[toggle:{type:boolean,default:false}]
                data () {
                    return {}        
                },
                methods:{
                greet(){
                this.$emit("btn-click");
                }
                }
                ,
                mounted() {
                    console.log('Add more componente mounted.')
                }
            }
</script>

и родительский html-компонент 

<template>

        <div v-show='toggle' class="bg-white">
            <div class="row">
                <div class="col-md-5">
                    <h1>Title</h1>
                  <your-btn :toggle="toggle" v-on:btn-click="greetFromBtn"/>
                </div>
            </div>
        </div>

</template>

    <script>
    import yourBtn from 'pathToYourBtnComponent/yourBtn'
        export default {

            data () {
                return {
                    toggle: true
                }
            },
            components:{
            yourBtn
            },
            methods:{
            greetFromBtn(){
            
            }
            },

            mounted() {
                console.log('Add more componente mounted.')
            }
        }
    </script>
0 голосов
/ 04 сентября 2018

Пожалуйста, сначала прочтите эту документацию - https://vuejs.org/v2/guide/components.html#Sending-Messages-to-Parents-with-Events

...