Communication methods in Vue
1.props/$emit
Parent to child (property transfer props)
When a parent component transmits data to a child component, it transmits data through attributes:
1. Parent component: use attribute binding to transfer data
==Note: = = son refers to the name of the sub component, for example:
This is generally used when referencing child components in parent components;
2. In sub components: receive data with props; For example: props: {search text}
3. Code example:
Code in parent component:
<search-result v-if="isResultShow" :search-text="searchText">
</search-result>
<!-- /Search history results -->
<!-- Lenovo suggestion -->
<!--
1. v-else-if="searchText" Otherwise, if there is searchText Show Lenovo suggestions;
2. :search-text="searchText" Pass the content entered in the search box in the parent component to the child component;
3.
-->
<search-suggestion :search-text="searchText"
v-else-if="searchText"
@search="onSearch">
</search-suggestion>
<!-- /Lenovo suggestion -->
<!-- Search history -->
<!--
1.
-->
<search-history v-else
:search-histories="searchHistories"
@clear-search-histories="searchHistories = []">
</search-history>
<!-- /Search history -->
</div>
</template>
<script>
// Import search subcomponent
import SearchHistory from './components/search-history'
import SearchSuggestion from './components/search-suggestion'
import SearchResult from './components/search-result'
export default {
name: 'SearchPage',
components: {
// Register subcomponents
SearchHistory,
SearchSuggestion,
SearchResult
},
props: {},
data () {
return {
// Contents of the search box
searchText: '',
// Control the display of search results (not displayed by default)
isResultShow: false,
// Used to store history
searchHistories: []
}
},
Code in subcomponent:
export default {
name: 'SearchHistory',
components: {},
// Note: props data can only be modified and cannot be re assigned (otherwise, the parent component's associated data cannot be synchronized)
props: {
searchHistories: {
type: Array,
require: true
}
},
- Steps for transferring values from parent to child:
- Bind the attribute in the child component tag of the parent component; (the parent component must first reference the child component and register the child component in components)
- In the sub component, props is used to receive the data transmitted from the parent component;
Note: props data can only be modified and cannot be re assigned (otherwise, the parent component's associated data cannot be synchronized);
props can only be used to pass values from parent to child;
Child to parent ($emit)
When using a component, all attribute names and event names belong to the child component, and attribute values and event methods belong to the parent component;
(that is, only attribute name and event name are defined in the child component, and attribute value and event method are defined in the parent component.)
- vm. o n Bind set matter piece ; v m . on binding event; vm. on binding event; vm.once binding; vm. o f f solution Bind matter piece ； v m . off unbinding event; vm. off unbinding event; vm.emit trigger event;
- Bind some events to the father, and the son will pass the data when triggering the event;
- One way data flow: the father data is refreshed, and the son data is refreshed:
- The attribute value (method) is the father's and the attribute is the son's (custom attribute / event name)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="shortcut icon" href="#" type="image/x-icon">
</head>
<body>
<div id="app">
<!-- Pass child to parent 3: find the method of binding parent component through its own custom event name -->
<son @sonclick='parentFn' :parentnum='num'></son> <!-- The attribute value (method) is the father's and the attribute is the son's (custom attribute)/Event name)-->
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let son = {
// Child to parent 1: click an element in the child component to trigger its own event add
template:`<div @click = 'add'>Add after clicking{{a}}Change to:{{parentnum}}</div>`, //Use the data in the parent component
props:['parentnum'], //The child component receives the data transmitted by the parent component
data(){
return {
a:10,
}
},
methods:{
add(){
// Pass child to parent 2: in the event add, trigger your own custom event name and pass the parameter
this.$emit('sonclick',this.a);
}
}
};
let vm = new Vue({
el:'#app',
data:{
num:9,
},
components:{
son,
},
methods:{
// Child to parent 4: operate the data from child components in the method
parentFn(val){
this.num += val;
}
}
})
</script>
</body>
</html>
Steps to transfer a child to a parent:
- Define an event for an element in the sub component, for example: @ click = "sendMsgToParent";
- When the sub component responds to the above event (event in 1), use KaTeX parse error: Expected '}', got 'EOF' at end of input:... This emit(‘listenToChildEvent’, ’ this message is from child’)
} - In the child tag (referenced child tag) of the parent component, listen to the custom event and add a processing method corresponding to the event< child : listenToChildEvent=“showMsgFormChild”>
methods: {
showMsgFormChild: function (data) {
console.log(data)
}
}
Method of parent component operating child component ($refs)
, give a ref attribute when using the component, and then in the parent component;
this.
r
e
f
s
.
l
o
a
d
yes
c
o
m
p
group
piece
real
example
；
t
h
i
s
.
refs.load is the comp component instance; this.
refs.load is the comp component instance; this.refs.load.close() is to obtain and execute the method in the sub component;
this.
r
e
f
s
.
l
o
a
d
.
refs.load.
refs.load.el is the div element that gets the root tag of the sub component comp;