标签：函数 代码 not 技术 new 提高 order eth 数据源
<template> <div id="father"> {{ ‘我是父组件‘ }} <son :text = "text"></son> </div> </template> <script> import son from ‘./son.vue‘ export default { data: function () { return { text: ‘从父组件传来的数据‘ } }, components: { son: son } } </script> <style scoped> </style>
<template> <div> {{ ‘我是子组件，我接收了‘ + text }} </div> </template> <script> export default { props: { text: { type: String, default: ‘‘ } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
<template> <div id="father"> {{ ‘我是父组件,名称是‘ + componentName }} <son :changeComponentName = "changeComponentName"></son> </div> </template> <script> import son from ‘./son.vue‘ export default { data: function () { return { componentName: ‘组件A‘ } }, methods: { changeComponentName: function (newComponentName) { this.componentName = newComponentName } }, components: { son: son } } </script> <style scoped> #father div{ padding: 10px; margin: 10px; border: 1px solid gray; } </style>
<template> <div> <p>我是子组件：一个button</p> <button @click="() => changeComponentName(newComponentName)"> 把父组件的名称修改为：彭湖湾的组件 </button> </div> </template> <script> export default { data: function () { return { newComponentName: ‘彭湖湾的组件‘ } }, props: { changeComponentName: { type: Function, default: () => { } } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
demo:
点击前：
点击后：
图解：
<template> <div id="father"> <div> {{ ‘我是父组件,我的名称是:‘ + fatherComponentName }} <son v-on:changeComponentName = "changeComponentName"></son> </div> </div> </template> <script> import son from ‘./son.vue‘ export default { data: function () { return { fatherComponentName: ‘A组件‘ } }, methods: { changeComponentName: function (componentName) { this.fatherComponentName = componentName } }, components: { son: son } } </script> <style scoped> #father div{ padding: 10px; margin: 10px; border:1px solid grey; } </style>
<template> <div> <p>我是子组件:一个按钮</p> <button @click="clickCallback"> 修改父组件的名称为：彭湖湾的组件 </button> </div> </template> <script> export default { data: function () { return { fatherComponentName: ‘彭湖湾的组件‘ } }, methods: { clickCallback: function () { this.$emit(‘changeComponentName‘, this.fatherComponentName) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
demo:
点击前：
点击后：
<template> <div id="father"> <div> {{ ‘我是父组件:father‘ }} <eldest-son :text = "text"></eldest-son> <youngest-son :changeText="changeText"></youngest-son> </div> </div> </template> <script> import eldestSon from ‘./eldestSon.vue‘ import youngestSon from ‘./youngestSon.vue‘ export default { data: function () { return { text: ‘我是一行文本‘ } }, methods: { changeText: function () { this.text = ‘我是经过改动的一行文本‘ } }, components: { eldestSon: eldestSon, youngestSon: youngestSon } } </script> <style> #father div{ border: 1px solid grey; padding: 10px; margin: 10px; } </style>
<template> <div> <p>我是兄弟组件：eldestSon</p> <p>我有一个可变数据text：{{ text }}</p> </div> </template> <script> export default { props: { text: { type: String, default: ‘‘ } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
<template> <div> <p>我是兄弟组件：youngestSon</p> <button @click="changeText">更改eldestSon兄弟组件中的文本</button> </div> </template> <script> export default { props: { changeText: { type: Function, default: () => {} } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
点击前：
图解：
标签：函数 代码 not 技术 new 提高 order eth 数据源
原文地址：http://www.cnblogs.com/penghuwan/p/7286912.html
